[캠프 Day 39] 서비스 기획 심화 - 구조화된 UI 설계 & 반응형 웹 만들기(Framer)

● Intro

 저번 1주차 강의를 통해, Framer를 이용하는 기본적인 방법은 배웠다. 이제 더 나아가서 웹페이지를 보다 편리하고 능숙하게 만들기 위한 방법들을 살펴보려 한다. 어떤 꿀팁들이 있는지 알아보자.

---

● 스타일 시스템

 

▶ 컬러 스타일

: 자주 사용하는 색상을 스타일로 정의하여 여러 요소에 재사용하는 기능

- 색상 선택 후 Color Picker 하단의 'New Style' 클릭
- 이름은 'surface/0', 'content/100' 등 의미 기반 또는 숫자 기반 구성
- 스타일을 수정하면 해당 스타일이 적용된 모든 요소에 자동 반영
- 'Assets 패널' → 'Styles'에서 스타일 관리 (이름 변경, 폴더 정리, 삭제 가능)
- 스타일에서 분리하고 싶을 땐 Color 값 수동 변경 or Fill 제거

---

▶ 텍스트 스타일

: 글자 크기, 폰트, 줄 간격 등을 미리 정의하여 페이지 전체의 타이포그래피 일관성을 유지할 수 있는 기능

- 텍스트 선택 → Properties 패널의 'Style'항목 → + 버튼 클릭
- 'Heading1~6' 또는 'Paragraph'로 태그 지정
- 이름 예시: 'heading/1', 'body/regular'
- 텍스트 색상과 정렬은 인스턴스에서만 Override 가능 (스타일 자체에는 영향 없음)
- 스타일을 삭제하려면 먼저 모든 레이어에서 해당 스타일을 제거해야 함

---

● 컴포넌트

: 버튼, 카드, 네비게이션 바, 푸터 같은 UI 요소를 재사용 가능한 단위로 만드는 기능

 

- 요소(버튼 등)를 선택한 후 오른쪽 클릭 → Create Component
- 컴포넌트 이름 지정 ('buttons/primary-cta' 형태로 폴더 구조도 생성됨)
- 자동으로 컴포넌트 전용 편집화면으로 이동됨

 

▶ Variants

- 기본 상태 외에도 hover, pressed, inverted 등 다양한 스타일을 한 컴포넌트 안에 만들 수 있음
- 각 Variant에 맞게 배경색, 텍스트 색 등을 조정하고 이름을 붙임

 

▶ Variable(옵션) 만들기

- 'Create Variable'
- 이름을 지정
- 컴포넌트 인스턴스에서는 별도로 텍스트 입력, 여백 설정, 숨기기 등 가능

Variable 예시

---

● 반응형 디자인

: 사용자가 어떤 기기를 사용하든 웹사이트의 콘텐츠와 레이아웃이 자연스럽게 적응하는 것을 말한다.

 

- 데스크탑, 태블릿, 모바일 등 모든 화면 크기에서 일관된 경험을 제공하는 것이 핵심
- 예를 들어, 데스크탑에서는 옆으로 나란히 배치된 카드가 모바일에선 위아래로 배치되는 것(유동적 레이아웃)

 

▶ Absolute -> Stack/Grid
: Absolute로 배치된 요소들은 절대적으로 고정된 값을 가지는 경우가 있어, 반응형 디자인에 적합하지 않음.

- Stack/Grid를 통해 정렬

 

▶ 헷갈리는 속성 정리

속성	설명	사용 상황
Fill	부모 프레임의 여유 공간을 꽉 채움	반응형 구성 시 기본
Fit	콘텐츠에 맞게 크기 자동 조절	텍스트, 아이콘 등 가변 콘텐츠
Fixed	고정된 크기(px 등)	로고, 버튼 높이 등 고정 필요 요소
Max Width	크기가 너무 커지는 걸 방지	Container에 주로 사용

---

▶ 이미지는 Frame으로 한번 더 덮기

: 이미지나 콘텐츠에 여백을 주고 싶을 때, 해당 요소에 직접 padding을 주는 대신, 한 겹 더 감싸는 Frame을 만들어서 padding을 적용하는 방식이 매우 유용함

- 이미지 Frame 자체는 자물쇠로 가로세로 고정하기

---

▶ BreakPoint

: 뷰포트의 너비에 따라 다른 레이아웃을 보여줄 수 있도록 만들어진 기준점

 

- 상위 BreakPoint에서 바꾼 것은 하위에서도 바뀜

- 하위에서 바꾼 것(override)을 돌려놓고 싶으면 Reset Override

- 하위에서 요소를 지워도 삭제되는 것이 아니라, visible이 no가 됨

- 하위에서 바꾼 것을 전체에 적용하고 싶으면, 우클릭해서 Update Primary

 

▶ Text 스타일에 BreakPoint 추가하기

: Text Layer에 개별적으로 Override 하지 않고도, Text Style 자체에 Breakpoint를 추가할 수 있다.

 

1. 텍스트 선택 → Style 패널에서 Text Style 클릭
2. '+ Add Breakpoints' 클릭 → Large / Medium / Small 생성됨
3. 각 Breakpoint에서 Size, Line Height 등 조정 가능

---

한 줄 코멘트: 전반적으로 내용은 모두 이해가 간다. 이런 툴 배우기에서 중요한 건 역시 부딪히며 배우는 거라 생각한다.. 얼른 3주차까지 마치고, 직접 만들어봐야겠다.