본문 바로가기

스킬업 챌리지

#45_프레이머 입문<10.21~10.25>

 

2~3년 전에 프레이머의 존재에 대해서 알고 있었고

공부해야지.. 생각만 했었는데 이번 기회로 제대로 공부해봐야겠다

 

토스에서도 도입한 프레이머!

코딩없이 빠르게 화면 구현을 할 수 있는 디자인툴인데

단점은 어렵다는거??

 

 

 

총 1시간 40분짜리 영상인데 이번주안으로 듣는걸 목표로 ~

1단계부터 10단계 체크를 통해서 최종적으로 도메인 주소 등록하고 연결하는것 까지

 

 

 

클라우드웨이즈로 홈페이지 만들기 15단계 (2024년) - 가이드빈

클라우드웨이즈를 이용하여 홈페이지 만들기 방법에 대한 가이드입니다. 도메인 구매, 호스팅 가입 방법 뿐만 아니라 워드프레스 템플릿을 어떻게 변경할 수 있는지도 15단계 가이드로 영상과

guidebean.com

 

이분 강의 무료인데 미쳤다...

감사합니다 선생님 ㅠㅠ

 

24.10.21~25 계획표

▪️ 프레이머로 스타벅스 코리아 웹사이트 메인페이지  리뉴얼
(데스크탑, 태블릿, 모바일)

 

 

 

24.10.21(월)

 

 

오늘은 데스크탑 헤더를 만들었다.

브레이크 포인트를 지정해서 PC를 디자인하면

태블릿과 폰 사이즈도 같이 만들어진다.ㄷㄷ

 

레이아웃, 컴포넌트, 브레이크 포인트등

다양한 기초 개념을 익혔다 맛보기 너낌쓰

 

 

 

24.10.22(화)

 

히어로섹션이랑 신메뉴섹션을 만들고 편집했다.

 

 

재미있는 이펙트들이 많고

기본으로 제공되어 있어서 만들기 정말 간편하다

 

 

 

24.10.23(수)

 

쓰면 쓸수록 미친 툴임이 분명하다...

3일만에 노코드로 원페이지 사이트 완성!

 

이펙트나 에니메이션 구동이

너무 쉽고 간편하다...

반응형 제작에 최적화 되어있는듯

 

 

일단 문의하기까지 완성

 

원페이지 만들기 너무 좋다!!

기능이 너무 많아서 좋았던 기능 위주로 정리하기~

 

 

 

1.스크롤섹션 지정

: 스크롤 섹션을 지정해서

원하는 메뉴에 링크하면 클릭 시, 해당 섹션으로 이동한다

 

 

 

 

 

 

2.뽀용한 이펙트

: 스택을 선택해서 스크롤 트렌스폼 이펙트 넣기

 

 

 

Trigger : Layer in View

From : 시작

To : 마지막

Transition : 전환효과

 

 

3.브레이트 포인트 자동지정

: 폰트 스타일 컴포넌트를 만들어서

브레이크포인트를 설정하면 자동으로 폰트 사이즈를 줄여줌

 

L,M,S 선택해서

더 디테일하게 조절가능 ㄷㄷ

 

 

24.10.24(목)

 

오늘 내일은 스타벅스 사이트 다듬어서

최종본 만들기!!

 

유료플랜으로 결제하면 도메인 등록도 할 수 있다 ㄷㄷ

 

 

 

24.19.25(금)

 

인터렉션 재밌다..!!!!

피그마 보다 훨~~~씬 간단하고

기본 제공되는 기능이 많다

 

디테일한 부분 건드리는게 쪼끔 어려움

그래도 반응형 자동으로 만들어주는거

너무너무 편하고 시간 단축된다!

 

 

🔻내가 만든 반응형 웹사이트🔻

https://high-predict-865076.framer.app/

 


 

* 프레이머 사용 느낀점 *

디자인을 하면 개발을 동시에 해주기 때문에

개발을 못하는 디자이너에게 좋을 것 같다

기본적인 HTML,CSS 개념을 이해하고 있으면 더욱 좋은 시너지가 날듯!!

그저 신세계임......

얼른 한국에 도입하는 회사가 많아졌으면 좋겠다

근데 이렇게 되면 퍼블리셔의 포지션이 거의 대체될것 같다..

디자이너도 이렇게 대체될 날이 올까 ㅜㅜ