[내배캠] 서비스 기획 심화 | ① Framer 입문

 

 

Framer란 무엇인가?

 

01. Framer란?

 

웹사이트를 디자인・퍼블리시・분석 가능한 올인원 노코드 웹 제작 도구

 

02. 노코드(No-Code)란?

 

• 코드를 몰라도 만들 수 있는 개발
• 장점
  • 낮은 학습 곡선: 전문 프로그래밍 언어를 배우지 않아도, 직관적 UI로 짧은 시간 내 작업 결과를 볼 수 있음
  • 프로토타이핑 속도 상승: 아이디어나 기획안을 즉시 시각
  • 비용 절감: 초기 개발 비용을 줄이는 동시에, 유연한 반복 수정(Iteration)이 용이

 

03. 타 노코드 툴과 비교한 Framer의 강점

 

• Figma와 유사한 UI로 낮은 진입 장벽
• 개발 지식 없이 웹사이트에 필요한 다양한 컴포넌트 및 로직들 구현 가능
• 몇 번의 클릭만으로 손쉽게 실시간 미리보기 및 퍼블리싱 (배포 가능)

 

 

 

인터페이스 살펴보기

 

01. Framer 회원가입 및 앱 설치

 

02. 상단 툴바 (Toolbar)

 

 

프로젝트 설정, 요소 삽입, CMS, 프리뷰, 퍼블리싱 등

 

03. 좌측 패널 (Left Sidebar)

 

 

페이지, 레이어, 자산 등 프로젝트 구조를 구성

 

04. 우측 속성 패널 (Right Sidebar)

 

 

선택한 요소의 속성/스타일/인터랙션을 조절

 

05. 캔버스 (Canvas)

 

 

실제 디자인 작업이 이루어지는 공간

 

06. Framer 프로젝트의 구조 이해

 

Workspace
└── Project (웹사이트 단위)
    ├── Pages (여러 페이지 구성)
    │   └── Canvas (디자인이 이루어지는 공간)
    │       └── Breakpoints (화면 크기별 레이아웃 단위)
    └── CMS, Assets, Settings 등 부가 기능

 

07. 주요 단축키 요약

 

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

 

 

 

 

새 프로젝트 시작하기

 

01. Framer 프로젝트의 구조 이해

 

Workspace → Project → Pages → Canvas → Breakpoints

 

02. 새 프로젝트를 시작하면

 

• 기본으로 ‘Home’ 페이지 생성
• Home: 사용자가 루트 도메인(yourdomain.com)에 접속했을 때 가장 먼저 열리는 페이지
• 페이지명, 타이틀, URL 경로, SEO 메타데이터 등은 설정에서 모두 변경 가능

 

다른 페이지를 home으로 설정

 

03. 페이지 구성과 폴더 구조 만들기

 

• 페이지 추가: 좌측 패널 Pages 탭 → + 버튼 → New Page → 페이지 이름 지정 → URL 경로 자동 생성
• 페이지 설정: 페이지 타이틀, 설명, 썸네일 이미지, 인덱싱 여부 등 설정 → SEO 최적화와 공유 미리보기에 중요
• 폴더로 그룹 구성: + 버튼 → New Folder → 페이지 드래그하여 폴더에 넣기

 

04. Breakpoint 이해와 반응형 디자인 준비

 

 

• Breakpoint: 각 디바이스(데스크탑, 태블릿, 모바일)에 맞춘 디자인을 담는 프레임 단위
• 각 페이지에는 최소 하나의 Breakpoint가 필요하며, 여러 개를 추가해 반응형 디자인을 구현할 수 있음
• 사용 팁
  • 동일한 컴포넌트를 모든 Breakpoint에 자동 상속 가능
  • 특정 뷰포트에서만 레이아웃을 수정하고 싶을 때 "Override" 기능 활용
  • Breakpoints는 상단 캔버스에서 + 버튼을 눌러 추가 가능

 

05. 캔버스 구조와 사용법

 

• 무한한 작업 공간
• 디자인 요소들은 반드시 Breakpoint 프레임 안에 있어야 웹사이트에 노출됨
• 외곽은 참고용, 실험용으로 사용 가능

 

 

 

Frame 중심의 사고방식

 

01. Frame이란?

 

 

• 모든 UI 요소가 사실상 Frame → 텍스트, 버튼, 이미지, 카드 등
• Frame은 콘텐츠를 감싸고, 배치하고, 레이아웃 구조를 결정하는 핵심 단위

 

02. Frame의 역할

 

• 그룹핑: 텍스트, 버튼, 이미지 등을 하나의 카드(Card)로 묶기
• 레이아웃: Stack, Grid 기반으로 요소 정렬
• 뷰포트 대응: Breakpoint에 따라 반응형으로 위치 및 배치 조정
• 스타일링: 테두리, 배경색, 그림자 등 시각적 스타일 적용

 

03. Frame 생성 및 조작법

 

• F 키 → Frame 도구 활성화
• 드래그로 생성 → Shift로 정사각형, Alt로 중심에서 확대
• 여러 요소 선택 후 Cmd + Enter → Wrap with Frame
• 부모 Frame 삭제: Cmd + Delete (자식은 남김)

 

04. 기본 조작과 네스팅 이해

 

• 요소 선택: 클릭 또는 Layers 패널에서 선택
• 다중 선택: Shift + 클릭 또는 드래그로 여러 요소 선택
• 이동: Space + 드래그로 네스팅 해제 없이 이동
• 부모 Frame 이동: Esc 키
• 자식 요소 래핑: Cmd + Enter
• 정렬/간격 조정: 우측 패널의 Align / Distribute 도구 사용

 

05. 줌과 탐색

 

• Z 키 → Zoom 도구 활성화
• Option + 클릭 → Zoom Out
• Shift + 1 → 전체 보기 (Zoom to Fit)
• Shift + 2 → 선택 요소 중심 보기 (Zoom to Selection)
• Shift + 3 → 100% 보기 (Zoom to 100%)
• Space 누른 채 드래그 → 팬 이동

 

 

 

 

스택 이해하기 

 

01. Stack이란?

 

Add Stack

 

프레임(Frame)에 특수한 레이아웃 속성을 부여하여, 자식 요소들이 자동으로 세로 또는 가로 방향으로 정렬되게 하는 기능

 

02. Stack과 Relative Position 이해하기

 

• Absolute: 다른 요소와 독립적으로 자유롭게 배치
• Relative: Stack·Grid의 흐름을 따라 배치
• Fixed: 스크롤과 관계없이 화면(Viewport)에 고정
• Sticky: 스크롤 시 지정 위치에 도달하면 화면에 고정

 

Absolute 설정

 

03. Stack 속성 요약

 

• Direction: Row(가로) 또는 Column(세로) 방향 설정
• Gap: 자식 요소 간 간격 설정
• Padding: Stack 내부 여백 설정
• Distribute (Main Axis): 주축 기준으로 요소 배치 방식 설정
• Align (Cross Axis): 교차축 기준으로 요소 정렬 방식 설정
• Wrap: 공간이 부족하면 다음 줄로 자동 배치

 

※ Main Axis = Stack 방향, Cross Axis = 그 반대 방향

 

04. Fit Content vs Fill Container

 

• Fit Content: 자식 요소 크기에 맞춰 컨테이너 크기 자동 조정
• Fill Container: 부모 영역을 최대한 채우도록 크기 확장

 

※ 부모가 Fit이고 자식이 Fill이면 충돌 발생 → 프레이머가 자동으로 조정

 

05. 주요 단축키

 

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

 

 

 

 

그리드 이해하기 

 

01. Grid란 무엇인가?

 

I → Grid 생성

 

• 수평(Row)과 수직(Column) 방향 모두를 제어할 수 있는 2차원 레이아웃 시스템
• Grid 사용 예시:
  • 갤러리 레이아웃
  • 카드 리스트
  • 기능 목록 섹션 (Feature Bento)
  • 대시보드 구성

 

02. Grid 만들기

 

• 기존 Frame에 Layout → Grid 적용
• 툴바 → Layout → Grid 도구 선택 후 드래그
• 단축키 Shift + G로 바로 생성

 

03. Grid 구성 요소

 

Grid Frame (부모)
└── Grid Cells (자동 생성되는 보이지 않는 컨테이너)
    └── Grid Item (각 셀에 위치하는 자식 요소)

 

• Grid Frame: 전체 레이아웃의 틀
• Grid Cell: 요소들이 정렬되는 좌표 기준 공간
• Grid Item: 유저가 직접 배치하는 요소들 (텍스트, 이미지 등)

 

※ Grid Frame은 자체 패딩(Padding), 행/열 간격(Gap), 정렬 설정 등을 통해 전체 배치를 조절함

 

04. 주요 속성 정리

 

• 행(Row)과 열(Column) 개수
  • 기본적으로 고정 개수로 시작
  • 추가되는 Grid Item 수에 따라 자동으로 행 증가
  • 고급 설정 → "자동 열 생성"(Auto-fit) 활성화 → 반응형 그리드 구성 가능
• Gap (간격)
  • 행과 열 사이의 공간 지정
  • 동일한 수치로 설정하거나, 필요 시 각각 따로 지정 가능
• Padding (안쪽 여백)
  • Grid Frame 내부의 여백 설정
  • 콘텐츠가 너무 모서리에 붙지 않도록 쿠션 역할 수행
• Wrap 기능
  • Grid Item이 공간을 넘치면 다음 행으로 자동 이동
  • 반응형 레이아웃에서 유용

 

05. Grid Item의 제어

 

Span 3 적용

 

 

• Span: 여러 행(Row) 또는 열(Column)에 걸쳐 배치
• Fill: 셀의 전체 공간을 채우도록 크기 확장
• Fit Content: 콘텐츠 크기에 맞춰 자동 크기 조정
• Fixed: 고정된 크기 사용
• Alignment: 셀 내부의 정렬 위치 설정 (Start / Center / End 등)

 

06. Stack vs Grid 언제 써야 할까?

 

상황	Stack 사용	Grid 사용
한 방향 흐름	O	X
행+열 구성 필요	X	O
갤러리/카드 레이아웃	X	O
Hero 영역 (텍스트+버튼)	O	X
대시보드, 리스트	X	O

 

07. 주요 단축키

 

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

 

 

 

 

타이포그래피 

 

01. 텍스트 삽입과 텍스트 박스의 종류

 

• T 키 또는 Toolbar: Text Tool로 텍스트 삽입
• 클릭: 오토 크기 조절 박스 생성 (주로 헤딩용)
• 드래그: 고정 사이즈 박스 생성 (본문/패러그래프용)
• Grow Presets(3단 모드)과 Shift + A : 텍스트 박스 크기 제어

 

02. 텍스트 속성 기본 조작

 

• 텍스트 내용 수정: Properties 패널에서 직접 수정 가능
• 폰트 변경: Framer 기본 웹폰트 + 사용자 업로드 폰트 사용 가능
• 크기, 색상, 정렬, 자간(Letter Spacing), 줄간격(Line Height) 등 기본 속성 조절
• px, em, % 단위의 차이점 이해 및 실습

 

03. Variable Font 이해와 활용

 

Variable 폰트 굵기 변경

 

• Variable Font 선택 시 Weight, Slant, Grade, Width, Optical Size 등 세부 속성 조절 가능
• 각 속성은 애니메이션 적용 가능
• 폰트 내의 디테일한 축 조절로 텍스트 강조, 시각적 무게감 조절 가능

 

04. 텍스트 스타일 관리

 

• 좌측 Assets 패널에서 스타일 확인 및 폴더 정리 가능
• 사용 중인 스타일은 삭제 불가 (해제 후 삭제 가능)
• Find 기능으로 스타일이 적용된 위치 추적
• Replace with...로 한 번에 전체 스타일 교체 가능
• Tag(H1/H2/...)와 연결되어 있지 않은 텍스트에도 스타일 일괄 적용 가능 (Apply to all H1s)

 

05. 고급 텍스트 옵션

 

• Balance 기능: 여러 줄 텍스트 가독성을 높이기 위해 줄 간 길이를 비슷하게 조정
• 텍스트 쉐도우, 스트로크, 대문자/소문자 변환, 밑줄/취소선 등 추가 효과 사용 가능 (+ 클릭)

 

06. 주요 단축키

 

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

 

 

 

 

링크와 내비게이션 구성하기 

 

01. Framer에서 링크 추가하기

 

• 텍스트나 프레임, 버튼 등 모든 요소에 링크 설정 가능
• 요소 선택 → Properties Panel 상단의 Link + 버튼 클릭 혹은 L 키 입력

 

02. 링크 탐색 대상 유형

 

대상	예시	설명
페이지	/pricing	사이트 내 다른 페이지로 이동
섹션	#features	같은 페이지 내 특정 섹션으로 스크롤 이동
외부 사이트	https://framer.com	외부 웹사이트로 연결
CMS 항목	slug 기반	CMS에 등록된 콘텐츠 항목에 연결

 

03. 링크 스타일 관리

 

• 스타일:
  • Default: 기본 상태 색상/스타일
  • Hover: 마우스 오버 시 효과 (예: 색상 전환, 밑줄)
  • Current: 현재 보고 있는 페이지에 연결된 링크로 시각적 구분
• 링크 스타일은 일괄 적용 및 재사용 가능하여 navbar 등 반복되는 UI에서 유용함

 

04. 섹션 링크 (스크롤 이동)

 

Profile에 섹션 링크

 

• 섹션 이동은 스크롤 섹션 설정이 선행되어야 함
• 이동 대상이 되는 프레임 선택 → Properties Panel 하단 → Scroll Section 추가
• 링크 대상 페이지를 먼저 선택 → 그 안에서 섹션 이름 선택
• 옵션:
  • Offset Y: 섹션 이동 시 세로 기준 위치 조정
  • Scroll: 스크롤 이동 방식 설정 (Instant / Smooth)

 

05. 외부 링크 설정 시 주의사항

 

• 외부 페이지는 항상 https:// 포함 필요
• Open in new tab 옵션을 통해 새 탭에서 열 것인지 여부 설정 가능

 

 

 

 

콘텐츠 삽입과 인서트 패널 활용해보기

 

01. 이미지 추가하기

 

이미지 Focal Point

 

• 드래그 앤 드롭: 컴퓨터에서 이미지를 직접 캔버스로 드래그하면 이미지 Fill을 포함한 프레임 생성
• 직접 프레임 생성 + Fill 설정: 프레임을 그리고 Fill을 이미지로 설정하여 이미지 삽입
• 레이아웃 메뉴 활용: Toolbar → Layout → Image 선택 시, 플레이스홀더 이미지가 들어간 프레임 생성
• Plugins (Unsplash 등): Insert 패널에서 직접 무료 이미지 가져오기
• Intrinsic Size 복원: 이미지에 오른쪽 클릭 → "Intrinsic Size"로 원본 크기로 되돌리기

 

02. 지원 이미지 포맷 

 

• Raster: JPG, PNG, WebP, GIF, AVIF, TIFF
• Vector: SVG

 

03. 이미지 위치 조정

 

• "Focal Point" 기능으로 중요한 부분 고정
• Portrait 사진 등에서 눈에 포커스를 맞추면 리사이징해도 중요한 정보 유지 가능

 

04. 비디오 삽입하기

 

• 직접 삽입: MP4 파일을 캔버스로 드래그 또는 Layout → Video Frame 생성
• 호스팅 URL 붙여넣기 또는 파일 직접 업로드 가능 (계정 플랜에 따라 용량 제한 존재)
• 외부 플랫폼 임베딩: Insert 패널 → Media에서 YouTube, Vimeo 컴포넌트 삽입 가능

 

※ 외부 플랫폼은 호스팅, 버퍼링, 최적화 모두 자동 지원되어 성능상 유리

 

05. Insert 패널 활용하기

 

• I 키 또는 Toolbar 첫 번째 아이콘 → Insert 패널 열기, 검색 창 자동 포커스
• 주요 카테고리:
  • Basics: 전체 페이지 템플릿 (3 Breakpoints 포함)
  • Sections: Hero, Footer 등 섹션 단위 템플릿
  • Navigation: 메뉴, 네비게이션 바 등
  • CMS: Collection, Field
  • Creative: Fit Text, Arc Text, Countdown 등 창의적 컴포넌트
  • Media: 이미지, 비디오, Lottie, Spotify, YouTube, Vimeo 등
  • Forms: 기본 Form + Loops, Mailchimp 등 3rd Party 연동
  • Icons: 각종 아이콘 라이브러리 (Phosphor, Feather 등)
  • Interactive: 다국어 Selector, Site Search, Carousel 등 인터랙션 기능
  • Social: Instagram, Facebook, Google Maps 등 소셜 임베딩
  • Utility: Embed, 복사 버튼, 다운로드, Gumroad, Lemon Squeezy 등