[내배캠] 서비스 기획 심화 | ② 구조화된 UI 설계 & 반응형 웹 만들기

 

스타일 시스템 이해하기

 

01. 컬러 스타일 (Color Styles)?

 

반복되는 색상을 스타일로 정의하여 전체 사이트에서 한 번에 관리

 

02. 컬러 스타일 적용

 

Color Styles 적용

 

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

 

03. 컬러 스타일 관리

 

• Assets 패널 → Styles → Color
  • 이름 수정, 삭제, 폴더 정리 가능
  • 스타일이 적용된 레이어 찾기 (Find 사용)
• 스타일에서 벗어나고 싶을 경우:
  • 색상 변경 → 자동으로 스타일 연결 해제
  • 또는 Fill 제거 후 새 색상 지정

 

04. 텍스트 스타일 (Text Styles)

 

Text Styles 적용

 

• 글자 크기, 폰트, 줄 간격 등을 미리 정의하여 페이지 전체의 타이포그래피 일관성을 유지
• 텍스트 선택 → Properties 패널의 Style 항목 → [+] 버튼 클릭
• Heading1~6 또는 Paragraph로 태그 지정
• 이름 예시: heading/1, body/regular
• 텍스트 색상과 정렬은 인스턴스에서만 Override 가능 (스타일 자체에는 영향 없음)

 

05. 텍스트 스타일 관리

 

• Assets 패널 → Styles → Text
  • 수정, 이름 변경, 폴더 정리, 삭제 가능
  • 스타일 적용된 텍스트 찾기 (Find 사용)
• 특이사항:
  • 텍스트 색상과 정렬은 스타일에 포함되지 않음
  • 인스턴스에서 개별적으로 Override 가능
  • 스타일 삭제 전, 해당 스타일이 적용된 모든 텍스트에서 해제해야 함

 

06. 스타일 네이밍 및 관리 팁

 

• 폴더로 정리: content/, surface/, semantic/ 등으로 나누기
• 다양한 페이지 및 컴포넌트에 걸쳐 같은 스타일을 쓸 수 있어 시간 절약 가능

 

💡 예시

(1) 의미 기반 네이밍
    - surface/0, surface/1: 배경색 계층 구조
    - content/100, content/60: 텍스트 대비 레벨
(2) 숫자 기반 네이밍
    - gray/100, gray/300, primary/500 등 Material Design 스타일
(3) 폴더 사용하기
    - 스타일 이름에 / 포함 시 자동으로 폴더 생성됨 (content/100 → content 폴더 아래 100)

 

 

 

 

컴포넌트 만들기

 

01. 컴포넌트란?

 

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

 

02. 컴포넌트를 만들어야 하는 이유

 

• 수십 개의 버튼을 일일이 수정하지 않아도 됨
• 일관된 디자인 시스템 유지
• 다른 페이지 및 프로젝트에서도 활용 가능 (라이브러리 공유)

 

03. 컴포넌트 생성

 

Title 변경 가능한 컴포넌트로 설정

 

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

 

04. Variant 만들기 (기본/호버/비활성 등 상태 변화)

 

Variant 추가

 

기본 상태 외에도 hover, pressed, inverted 등 다양한 스타일을 한 컴포넌트 안에 만들 수 있음

 

05. Variable 만들기 (텍스트/색상/가시성 등 유연하게 만들기)

 

Variable 설정 후 새로운 카드에 적용

 

• 텍스트 레이어 선택 → Content → [+] → Create Variable
• 이름 지정 (buttonText, planTitle 등)
• 컴포넌트 인스턴스에서는 별도로 텍스트 입력 가능

 

06. 고급 사용: 컴포넌트 안에 컴포넌트 (중첩)

 

• 카드 안에 버튼 컴포넌트를 넣고, 카드 전체를 또 컴포넌트로 만들 수 있음
• 예: 카드 3종류를 하나의 컴포넌트로 만들고 버튼 텍스트, 가격, 플랜명 등만 바꾸기

 

07. 컴포넌트 관리

 

• 좌측 Assets 패널에서 컴포넌트 생성/수정/삭제/폴더 정리
• [공용 라이브러리 추가]를 통해 다른 프로젝트에서도 공유 가능

 

 

 

 

레이아웃 템플릿 활용하기

 

01. 레이아웃 템플릿이란?

 

• 반복되는 구조나 요소를 전체 페이지에 공통 적용할 수 있도록 만든 것
• 예시: 내비게이션 바, 푸터, 배경 색, 너비・공통 마진이나 패딩 등의 페이지 속성

 

02. 템플릿 생성

 

Layout Template 생성

 

• Nav 바 등 공통 요소를 우클릭 → Create Layout Template
• 이름 입력 (예: Main Layout)
• 자동으로 템플릿 뷰로 이동함 (Nav 요소 + Placeholder 생성)

 

03. 템플릿 적용

 

• 템플릿을 만들면 자동으로 모든 페이지에 적용되는 것이 기본 값
• 기존 페이지에서 중복된 요소는 삭제 필요
• 각 페이지 Breakpoint를 선택하면, 적용된 템플릿을 확인하거나 교체할 수 있음
• 템플릿을 적용하면 레이어 패널에서 해당 요소(Nav, Footer 등)는 페이지가 아닌 템플릿 내부에서만 보임

 

04. 템플릿을 유연하게 만드는 방법: Variables

 

(1) 상단 패딩 조절 변수

 

• Nav가 겹치지 않도록 기본 80px의 top padding
• 특정 페이지에서만 padding을 0으로 만들고 싶다면?
  → 템플릿에 Top Padding이라는 Toggle 변수를 추가 (Yes: 80px, No: 0px)

 

(2) Nav 스타일 Variant 조절

 

• Default・Inverted 등으로 분기되는 내비게이션 바 스타일
• 템플릿에서 Nav Style이라는 Variant 변수를 추가해 선택 가능하게 함

 

05. 템플릿은 컴포넌트처럼 다룬다

 

• 템플릿은 하나의 컴포넌트처럼 동작함
• 수정은 템플릿 뷰에서만 가능 (더블 클릭 또는 Assets 패널에서 진입)
• 템플릿이 적용된 페이지에서는 Nav/Footer를 직접 수정할 수 없음
• 변수만 조정 가능함 (페이지 단위의 컨트롤)

 

 

 

반응형 이해하기

 

01. 반응형 디자인이란?

 

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

 

02. 왜 반응형이 필요한가?

 

• 화면 크기가 너무 다양한 시대
• 쇼핑, 뉴스, 블로그 모든 UX는 모바일 중심
• 모바일 최적화 실패 → 검색엔진 노출 순위 하락 (Google SEO 기준)
• 모바일 사용량 증가: 현재 웹 트래픽의 절반 이상이 모바일에서 발생
• 검색 엔진 최적화(SEO): Google은 반응형 사이트를 더 높은 순위에 노출
• 일관된 사용자 경험
• 관리 효율성: 별도의 모바일/데스크탑 페이지를 만들 필요가 없음

 

03. 반응형 웹을 만드는 핵심 도구 2가지

 

(1) Fluid Layout

 

• 유동형 레이아웃
• 요소들이 부모 프레임의 크기에 따라 크기와 위치가 비율적으로 변하는 구조
• Fill, Fit, Fixed, Max Width 같은 속성을 적절히 조합하여 구성
• Stack이나 Grid를 활용해 자동 정렬 설정 가능

 

(2) Breakpoints

 

특정 뷰포트 너비를 기준으로 레이아웃을 재정의하는 기능

 

 

 

Framer에서 Fluid Layout 실습하기

 

Fluid Layout 실습

 

01. Absolute Position → Stack 전환

 

• Absolute로 배치된 요소 선택
• 우측 속성 패널에서 Add Layout → Stack 선택
• 방향(Row/Column), 간격(Gap), 정렬(Distribute/Align) 설정

 

02. Stack의 정렬 옵션: Space Between 이해

 

정렬 방식	설명	사용 예시
Start	모든 요소를 위쪽 또는 왼쪽에 정렬	기본 레이아웃, 리스트
Center	요소들을 중앙에 모아서 정렬	아이콘 모음, 버튼 그룹
End	요소들을 아래쪽 또는 오른쪽으로 정렬	푸터 요소
Space Between	첫 번째 요소는 시작 지점, 마지막 요소는 끝 지점에 정렬하고, 나머지는 균등하게 분산	네비게이션 바, 탭 메뉴, 카드 그리드
Space Around	요소들 사이에 균등한 간격을 배치하되, 양 끝에도 간격 존재	로고와 메뉴 사이의 여백이 필요할때

 

03. Fill / Fit / Fixed / Max Width 이해

 

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

 

04. 이미지 Frame을 Frame으로 한번 더 씌우기

 

• 여백을 주고 싶을 때, 해당 요소에 직접 패딩을 주는 대신 한 겹 더 감싸는 Frame을 만들어서 패딩을 적용하는 방식
• 실제로 Section → Container → Content 구조처럼, Layer를 나누어 감싸는 방식이 가장 보편적이고 유지 보수에도 강함

 

05. 주요 단축키

 

기능	단축키
삽입 패널 열기	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 + 드래그

 

 

 

 

Breakpoint를 활용한 레이아웃 최적화

 

Breakpoint 실습

 

01. Breakpoint란?

 

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

 

02. Breakpoint에서 레이아웃 Override하기

 

• 각 Breakpoint를 클릭하고 카드가 들어있는 Frame 선택
• Layout → Grid 설정 후 Column 수 조절
• 설정값이 파란색으로 바뀌면 Override 적용된 상태

 

03. Layout Template에 Breakpoint 적용

 

• Layout Template 안으로 진입 (Nav 더블클릭)
• 동일하게 [+] 버튼으로 Breakpoint 추가
• 각 Breakpoint별로 Nav나 Footer의 정렬, 간격 등을 조절

 

04. 텍스트 스타일에 Breakpoint 적용

 

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

 

05. Preview로 최종 확인

 

• Cmd/Ctrl + P: Preview 모드 진입
• 상단 Viewport 크기 핸들을 드래그 → Breakpoint 기준에 따라 자동 전환되는 모습 확인
• 사이드바에서 각 Breakpoint 이름을 클릭해 직접 Jump 가능