26.01.16 TIL 46: 본캠프 36일차- Framer 입문‼️

📌 오늘의 진도:

강의: 

서비스 기획 심화- Framer 입문 (누구나 만들 수 있는 첫 웹사이트)

아티클:

x

 

오늘의 인사이트  👀

오늘은 새로운 주차를 시작하였다. 서비스 기획 심화에 들어가게 되었다.
Framer라는 도구를 알게 되었는데 이것은 웹사이트를 디자인하고, 퍼블리시하고, 분석할 수 있는 올인원 노코드 웹 제작 도구이다.

기존 사전캠프때 FIGMA를 배웠지만 정말 하나하나 다 세세하게 공부해야했던거에 비해

Framer는 이미 만들어진 컴포넌트들로 피그마보다는 더욱 더 빠르게 만들 수 있을거 같았다.
확실히 피그마 보다는 쉬울거 같은 느낌이였다. 

 

강의에서!!
Framer 강의를 들으면서 나중에 유용하게 쓰일만한 단축키를 조금 더 공부를 해봤는데!

오늘은 내가 배운 단축키를 같이 공유를 해볼 예정이다!

기능	단축키
삽입 패널 열기	I
Quick Action 실행	Cmd + K / Ctrl + K
Canvas 팬(Pan) 모드	Space 누른 상태로 드래그
확대/축소	Z, Option + 클릭
Zoom to fit	Shift + 1
Zoom to selection	Shift + 2
Zoom to 100%	Shift + 3
부모 프레임으로 이동	Esc
다중 선택	Shift + 클릭
중첩 방지 드래그	Space + 드래그

 

기본 조작과 네스팅 이해

조작	단축키/방법
요소 선택	클릭 또는 Layers 패널에서 직접 선택
다중 선택	Shift + 클릭, 박스로 드래그 선택
네스팅 해제 없이 이동	Space + 드래그
부모 Frame으로 이동	Esc 키
자식 요소 래핑	Cmd + Enter
정렬/간격 조정	우측 패널 상단 Align/Distribute 도구 사용

 

Stack 관련 주요 키!

기능	단축키
Fit Content (선택 후)	Shift + A
Add Stack (선택 레이어를 Stack으로 감싸기)	⌥ + ⌘ + ↩ (Mac) / Ctrl + Alt + ↩ (Windows)
Stack 방향 전환	우측 속성 패널에서 수동 조정
Stack 레이아웃 추가	Layout 메뉴 > Stack 선택

 

Grid 관련 주요 키

기능	단축키
Grid 만들기	Shift + G
Span 늘리기	Properties 패널에서 직접 입력 또는 드래그
Fit Content 적용	우클릭 → "Fit Content" 또는 Shift + A

 

타이포그래피 주요 키 

기능	단축키
텍스트 삽입	T
자동 크기 모드 전환	Shift + A
텍스트 Balance 설정	Text > + > Balance 체크

 

그러면 오늘 하루도 끝!