툴을 처음 배우려고 할때는 공식 커리큘럼만큼 훌륭한 것이 없다 ...
자, 우선 이것을 돌파해보기로 한다!!!
https://www.youtube.com/playlist?list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd
Learn the Fundamentals of Framer — Framer Course
A comprehensive beginner’s course that teaches you everything you need to know to become productive in Framer.
www.youtube.com
후후 우선 해당 커리큘럼을 통해 제작한 나의 홈페이지를 공개합니다...
~~~~&^^& 초-뿌듯...
해당 스터디 일지를 작성하는 이유는, 강의에서 조금 아쉬운 부분들이 있어서
부가설명과 함께 기록하면 다른 사람들이 도움이 되겠다 싶어서에요!
Welcome to my Test page
Aiming to be a Framer wizard at it faster than say "Abracadabra!"
jellyman.framer.website
총 13개의 동영상으로 구성되어있고, 첫 3강까지는 개념적 설명(보기만해도됨),
4강부터 본격적인 실습에 들어가는 구조로 이루어져있습니다.
미리 내용들을 조금 파악해두면 좋을 것 같은 내용들이 있었어요!!
우선, 기능적 내용!
모든 시작이 여기서 이루어진다고 생각하면 편해요!
이중에서도 제일 기본이 되는 것은 프레임 Frame 단축키(F)를 통해 만들 수 있습니다.
레이아웃 옆에 있는 +삽입 Insert 는 이미 만들어져있는 기능을
삽입/추가 하는 개념으로 생각하면 이해하기 편해요.
좌측에는 이렇게 탭 구조로 되어있는데, 아주 편리 😘
가장 많이 보게되는 페이지는 아무래도 레이어!!
처음으로 프로젝트를 생성하게되면, 데스크탑 기반의 빈 페이지가 생성됩니다.
이제 여기서 지지고 볶고 자시고 하는 것인데 ...
자, 언제나 무언가를 하려고 할 때 가장 먼저해야하는 것은 프레임 만들기! (블록/박스 만들기)
프레임을 만들어보자.. 진짜 이렇게 대충;; 만들어도 됩니당.
어차피 반응형으로 만들게되면서 전체적으로 수정해야됨^-^)/
-
가장 기본적인 예시로, 이 안에 텍스트를 써볼게요.
이미지도 넣어볼까요? 이미지는 파일자체를 복사해서 프레이머에서 붙여넣어도 되고,
드래그앤드랍으로 끌어와도 된답니다!
ㅎㅎ 여기서 이제 레이어 정렬을 통해서 모든것이 이루어지게 되는데요,
사실 피그마를 주로 다뤘던 디자이너라면 익숙하죠?
이게 기본 개념이구요! 드디어, 프레이머에서 디자인을 할때
가장 중요한 내용들을 다루게 되는데요. 미리 숙지해봅시다.
우측에 있는 패널에서 디자인을 작성하게 됩니다.
하나씩 해볼게요, 우선 왼쪽 패널의 레이어에서 만들어둔 프레임을 클릭하고 우측에 사이즈값을 보면,
이런식으로 되어있을 겁니다. 숫자는 중요한게 아니고, 가로세로 값을 Fixed 로 사용하고 있다는게 중요해요!
고정된 가로세로 값을 가지고 있습니다. 저희는 반응형 디자인을 만들게 될거라,
가로 사이즈 입력란에 100%로 입력해볼게요.
그렇게 되면 자동으로 사이즈 값이 "Rel"로 전환되고,가로가 화면에 꽉차게 되어요!
프레이머에서 디자인을 할 때 자주 쓰게되는 개념입니다.
"Rel"은 relationship의 약자구요, 퍼센테이지로 작성됩니다~!
100%니까 화면의 100%를 사용한다는 의미겠죠?
하지만 고양이 이미지가 잘려있습니다 ... 세로값도 지정해줄게요.
세로값은 어떻게 하는게 나을까요? 웹페이지는 보통 세로로 계속 늘어나는 구조이기 때문에
Rel 보다는 Fit을 많이쓰게 될텐데요.
"Fit Content" 가 바로 그 기능입니다.
사이즈 입력란에 Auto로 작성하면 자동으로 Fit 값으로 변환됩니다.
이제 프레임의 기초를 다진 거에요!
현재는 프레임에 텍스트와 이미지가 바짝 붙어있고,
텍스트와 이미지 사이간격도 바짝 붙어있는 못생긴 디자인이에요.
여기서 "패딩 Padding" 이랑 "간격 Gap"의 개념을 사용해서 정리하게 됩니다.
이런식으루요!!
여기서 조금 더 심화한 과정은 다음 블로그에서 작성할게요,
레츄고~~~~~~~~~~
2024.03.03 - [오늘의 스터디] - 디자이너의 프레이머 스터디 일지 02 *Framer Study
디자이너의 프레이머 스터디 일지 02 *Framer Study
2024.03.03 - [오늘의 스터디] - 디자이너의 프레이머 스터디 일지 01 *Framer Study 디자이너의 프레이머 스터디 일지 01 *Framer Study 툴을 처음 배우려고 할때는 공식 커리큘럼만큼 훌륭한 것이 없다 ...
jelly99man.tistory.com
'오늘의 스터디' 카테고리의 다른 글
| 디자이너의 프레이머 스터디 일지 02 *Framer Study (3) | 2024.03.03 |
|---|