39일차[framer, 숙련과제 우사사례 특강]

📚 오늘의 공부 기록 | Framer 기초 + 우수사례 특강 회고

오늘은 Framer라는 노코드 웹 제작 도구의 기초를 쭉 훑었다. 챕터 1-1부터 1-7, 그리고 2-1, 2-3까지. 양은 많았는데 정리하면서 한 번 더 머리에 넣어보려고 한다.

---

🛠️ Framer가 뭔지부터

Framer는 올인원 노코드 웹 제작 도구. 디자인부터 퍼블리싱, 배포까지 한 번에 되는 게 강점이다. Figma는 디자인까지만 되는데 Framer는 실제 사이트로 띄울 수 있다는 게 큰 차이.

비슷한 도구로 Webflow, Bubble 등이 있는데 Framer는 진입장벽이 낮은 편(Figma랑 UI가 비슷)이라서 노코드 입문용으로 좋다고 한다.

---

🖥️ 인터페이스 & 프로젝트 구조

작업 화면은 크게 4개 영역으로 나뉜다.

• Toolbar (상단) - 요소 삽입, 퍼블리싱
• Left Sidebar - Pages, Layers, Assets
• Right Sidebar - 선택한 요소 속성 (컨텍스트 기반)
• Canvas - 실제 작업 공간

프로젝트는 Workspace → Project → Pages → Canvas → Breakpoints 계층 구조로 돼있다.

Breakpoint는 디바이스별 디자인 프레임. 데스크탑(1200px), 태블릿(768px), 모바일(375px)이 기본. 디자인 요소는 반드시 Breakpoint 안에 있어야 퍼블리시했을 때 보인다. 이거 까먹으면 안 됨.

외워두면 좋은 단축키

• 삽입 패널: I
• Quick Action: Cmd/Ctrl + K
• 캔버스 팬: Space + 드래그
• 부모 프레임으로 이동: Esc

---

🧱 Frame 중심 사고방식

Framer의 핵심 개념. 모든 UI 요소가 사실상 Frame이다. 텍스트, 버튼, 이미지, 카드 다 프레임으로 구성됨.

그리고 실무 레이아웃은 거의 다 "Frame 안에 Frame" (Nesting) 구조. 이게 처음엔 좀 헷갈리는데 익숙해져야 할 핵심 개념이라고 한다.

---

📐 Stack vs Grid

가장 많이 쓰는 레이아웃 두 가지.

Stack = 한 방향 정렬 (Figma의 Auto Layout, CSS의 Flexbox와 비슷)

• 내비게이션 바, 카드 리스트, 버튼 내부 정렬 등에 사용

Grid = 행+열 2차원 정렬

• 갤러리, 대시보드, 카드 그리드 등에 사용

상황StackGrid

한 방향 흐름	✅	❌
행+열 구성	❌	✅
Hero 영역	✅	❌
갤러리/대시보드	❌	✅

그리고 Fit Content / Fill Container 개념. Fit은 자식 크기에 맞춰 줄어들고, Fill은 부모 영역을 꽉 채운다. 반응형 UI 만들 때 핵심.

---

🔤 타이포그래피 & 스타일 시스템

텍스트는 T 키로 삽입. 클릭하면 자동 크기, 드래그하면 고정 크기.

Variable Font는 하나의 폰트에서 굵기, 기울기, 너비 등을 세부 조절할 수 있고 애니메이션까지 적용 가능. 이거 신기했다.

스타일 시스템이 왜 중요한가

• 버튼 색상 하나 바꾸려고 수십 개 레이어 일일이 수정? ❌
• 컬러/텍스트 스타일 한 번 정의해두면 → 한 번에 전체 반영 ✅

네이밍은 surface/0, content/100 같이 의미 기반으로 하면 협업/유지보수에 좋다고 한다. / 넣으면 자동으로 폴더 생성되는 것도 꿀팁.

---

📋 레이아웃 템플릿

Nav, 푸터처럼 모든 페이지에 반복되는 요소를 한 곳에서 관리하는 기능. 페이지마다 복붙하지 말고 템플릿으로 만들자.

Variables를 활용하면 페이지별로 살짝 다른 UI도 만들 수 있다. (예: 어떤 페이지는 Nav 투명, 어떤 페이지는 Nav 고정)

---

🎤 우수사례 특강 회고

장바구니 전환율 기획서 우수사례 특강을 보고 느낀 게 많다. "내가 부족했던 게 뭔지" 명확해진 시간이었다.

1. 시각자료가 진짜 중요하다

다들 보는 사람이 한 번에 이해하기 쉽게 시각자료를 정말 잘 만들었다. 글로 길게 풀어 쓴 것보다 한 장의 잘 만든 이미지가 훨씬 강력하다는 걸 다시 느꼈다. 다음엔 시각화에 더 신경쓰자.

2. As-is / To-be 명확히 구분하기

와이어프레임에서 "현재는 이렇고, 이렇게 바뀝니다"가 한눈에 들어와야 하는데 내 자료는 그 구분이 약했다. 시각적으로 대비해서 보여주는 연습이 필요하다.

3. 한 페이지 요약에 도전

의사결정자가 시간 없을 때 한 장만 봐도 다 이해되도록. 긴 기획서를 핵심만 뽑아 한 페이지로 압축하는 능력. 다음 과제에선 꼭 시도해보자.

4. 레퍼런스 = 논리적 근거

"다른 곳도 이렇게 해요"가 아니라 "왜 이게 우리 문제에 적합한지" 논리적으로 쓰는 근거 자료로. 인용이 아니라 논증의 도구로 활용하기.

---

🏁 한 줄 정리

Framer 기초 문법을 쭉 훑었고, 특강을 통해 **"내용보다 전달이 먼저다"**를 다시 새겼다. 다음 과제 키워드는 시각화 / As-is·To-be / 한 페이지 요약 / 논리적 레퍼런스. 이 네 가지 꼭 적용해보자. 💪

 

 

 

ps. 노트북 하나로 강의를 들으면서 실습을 하려니 너무 힘들다.. 거북목 심해진닭..