서비스 기획 심화 Chapter 1. Framer 기본 : 화면을 그리는 툴X, 웹 구조를 만드는 툴

◾서비스 기획 심화 : Framer로 MVP를 만들고 검증까지

 

Chapter 1. Framer 기본 : 화면을 그리는 툴이 아니라 웹 구조를 만드는 툴 ▼

[게시글 목차]

1. Framer는 어떤 도구인가
2. Framer 화면 구조
3. 프로젝트 구조
4. Frame 중심으로 보기
5. Stack 이해하기
6. Grid 이해하기
7. 타이포그래피
8. 링크와 내비게이션
9. 콘텐츠 삽입과 Insert 패널
◾Framer 활용 장점

 

+) 오늘의 인사이트/KPT 회고

 

활동 내역

• 특강) AI로 VOC 분석을 자동화하기(Google Form, Make, OpenAI)
• 아티클 카타) 상위 1% 개발자들의 포트폴리오, 경력 기술서 작성법

 

---

 

오늘의 특강
-
Framer 개념과 기본 사용법

 

1. Framer는 어떤 도구인가

• Framer는 코드를 직접 작성하지 않아도 웹사이트를 만들 수 있는 노코드 툴이다.
• 노코드라고 해서 단순히 쉬운 제작 도구라는 의미만 있는 것은 아니다.
  기획자나 디자이너가 개발자에게 전달하기 전 단계에서 아이디어를 직접 화면으로 구현하고,
  배포까지 해볼 수 있다는 점이 큰 장점이다.
  • 서비스 소개 랜딩페이지 만들기
  • 포트폴리오 페이지 제작하기(나도 포폴 이걸로 만들 예정)
  • 간단한 MVP 화면 구현하기
  • 사용자 반응을 보기 위한 테스트 페이지 만들기
  • 개발 전에 화면 구조와 사용자 흐름 검증하기
• 예전에는 아이디어가 있어도 바로 확인하기 어려웠다.
  문서로 정리하고, 화면을 그리고, 개발 요청을 하고, 구현을 기다려야 한다고 했다.
  → Framer를 사용하면 이 앞단의 속도를 꽤 줄일 수 있다.
  (이게 장점이긴 하지만 한 편으로는 점점 이해관계자 간 경계가 모호해지는 원인이 되기도 할 듯)
• 물론 복잡한 서비스 전체를 Framer만으로 해결하기는 어렵다.(당연함)

 

2. Framer 화면 구조

• Framer 작업 화면은 크게 네 영역으로 나뉜다.
  • 상단 툴바 : 요소를 추가하거나, 미리보기, CMS, 퍼블리시 같은 주요 기능을 사용할 수 있다.
  • 좌측 패널 : 페이지, 레이어, 에셋을 확인한다(화면이 복잡해지면 레이어 구조가 금방 꼬임).
  • 우측 속성 패널 : 선택한 요소의 세부 설정을 바꾸는 곳이다.
    텍스트를 선택하면 글자 관련 옵션이 나오고, 프레임을 선택하면 크기나 정렬, 레이아웃 관련 옵션이 나온다.
  • 캔버스 : 실제 작업 공간이다. 화면 요소를 배치하고, 프레임을 만들고, 페이지를 구성하는 곳이다.
    → 정리하면 Framer는 좌측에서 구조를 확인하고, 가운데에서 화면을 만들고,
    우측에서 세부 속성을 조정하는 방식으로 움직인다.

 

3. 프로젝트 구조

• Framer의 작업 단위는 계층 구조로 되어 있다.

Workspace → Project → Page → Canvas → Breakpoint

• Workspace는 여러 프로젝트를 관리하는 가장 큰 단위다.
• Project는 하나의 웹사이트라고 보면 된다.
  ex. 포트폴리오 사이트 하나를 만든다면 그게 하나의 Project가 된다.
• Page는 웹사이트 안에 들어가는 개별 페이지다. Home, About, Contact 같은 페이지들이 여기에 해당한다.
• Canvas는 실제로 화면을 만드는 작업 공간이다.
• Breakpoint는 화면 크기별 레이아웃을 조정하는 단위다.
  데스크톱, 태블릿, 모바일 화면을 각각 어떻게 보여줄지 설정할 수 있다.
• Canvas 바깥에 둔 요소는 실제 사이트에 보이지 않는다.(일러스트레이터의 대지와 같은 개념인 듯)
  배포되는 화면에 포함되려면 요소가 Breakpoint 안에 있어야 한다.

 

4. Frame 중심으로 보기

• Framer에서 가장 기본이 되는 단위는 Frame이다.
• Frame은 그냥 사각형 박스가 아니라 화면 구조를 잡는 기본 틀이다.
  텍스트, 이미지, 버튼, 카드, 섹션 같은 요소들이 결국 Frame 안에서 정리된다.

ex. 프로필 카드를 만든다고 하면

프로필 카드 Frame
→ 이미지
→ 이름
→ 설명 문구
→ 버튼

ex. 서비스 소개 섹션을 만든다면

섹션 Frame
→ 제목 영역
→ 설명 영역
→ 이미지 영역
→ CTA 버튼 영역

• 이렇게 생각하면 화면을 단순히 배치하는 것이 아니라, 정보 단위별로 묶어서 구성하게 된다.
• 화면에 무엇을 넣을지보다 먼저 어떤 정보가 어떤 단위로 묶여야 하는지 봐야 한다.
  (디자인 할 때와 유사한 부분이 많은 듯...사실상 디자인적 요소가 많긴 함)

 

5. Stack 이해하기

• Stack은 요소를 가로나 세로 방향으로 자동 정렬해주는 기능이다.
• Figma의 Auto Layout을 써봤다면 비슷하게 이해하면 된다. 개발 쪽으로 보면 Flexbox와도 비슷하다.
• 버튼 안의 텍스트를 가운데 정렬하거나, 카드 안에서 제목과 본문, 버튼 사이 간격을 일정하게 둘 때 Stack을 쓴다.
• Stack에서 주로 조정하는 것
  → 방향 / 간격 / 안쪽 여백 / 정렬 방식 / 분배 방식
• 처음에는 그냥 직접 위치를 맞추는 게 더 빠르게 느껴질 수 있지만,
  요소가 많아지면 수동 배치는 금방 한계가 온다.(수작업이 그만큼 많아진다는 뜻 → 귀찮...)
  텍스트 길이가 바뀌거나 화면 크기가 달라지면 배치가 무너질 수 있기 때문이다.
• Stack을 쓰면 요소들이 흐름에 맞게 정렬된다. 그래서 반응형 화면을 만들 때 더 안정적이다.
• Fit Content는 내용물 크기에 맞춰 줄어드는 방식이고, Fill Container는 부모 영역을 채우는 방식이다.
  이 둘을 잘못 섞으면 레이아웃이 의도와 다르게 움직일 수 있다.(피그마에서도 나름 중요했던 내용)

 

6. Grid 이해하기

• Grid는 행과 열을 함께 사용하는 레이아웃 방식이다.
• Stack이 한 방향으로 정렬하는 기능이라면, Grid는 가로와 세로를 동시에 다룬다.
  • Stack : 한 방향 흐름
  • Grid : 행과 열이 있는 구조(대충 일러스트레이터의 줄자와 비슷한 개념/근데 반응형인)
• 카드 리스트, 이미지 갤러리, 기능 소개 영역, 대시보드 같은 화면은 Grid로 구성하는 편이 적합하다.
  (웹이든 앱이든 그리드가 중요하다/피그마에도 그리드 배율이라는 게 중요하게 다뤄짐)
• Grid에서는 각 요소가 셀 안에 배치된다. 필요하면 하나의 요소가 여러 칸을 차지하게 만들 수도 있다. 이걸 Span이라고 한다.
  (어? 내가 아는 그 span 맞나? 좌식 반갑다?)
• 단순히 같은 크기의 카드만 나열하는 게 아니라, 특정 카드는 크게 보이게 하고 다른 카드는 작게 배치하는 게 가능하다.

 

7. 타이포그래피

• 텍스트는 화면에서 정보의 우선순위를 만든다.(시선의 흐름이 곧 가독성이다)
• 제목, 본문, 버튼, 가격, 설명 문구는 전부 역할이 다르다. 그래서 같은 글자라도 크기와 굵기, 줄간격, 색상이 달라져야 한다.
  (참고로... 티스토리도 간격이랑 정렬 거슬려서 HTML/CSS 고침)
• Framer에서는 텍스트를 삽입하고 폰트, 크기, 색상, 정렬, 줄간격 등을 조정할 수 있다.
  Variable Font 같은 기능도 지원해서 폰트의 굵기나 폭을 더 세밀하게 조정할 수 있다.
• 기능 자체 < 스타일 관리
• 매번 텍스트를 하나씩 수정하면 페이지가 많아질수록 일관성이 깨진다.(진짜임... 내가 해 봄+귀찮음)
  제목 스타일, 본문 스타일, 버튼 텍스트 스타일을 미리 정해두면 나중에 수정하기도 쉽고 전체 화면의 톤도 유지된다.
• 타이포그래피는 단순한 디자인 요소가 아니다.
  사용자가 어떤 정보를 먼저 읽고, 어떤 내용을 보조 정보로 받아들이는지에 영향을 준다.
  → 결국 텍스트 스타일은 정보 구조와 연결된다(정보 위계).

 

8. 링크와 내비게이션

• Framer에서는 텍스트, 버튼, 프레임 등에 링크를 연결할 수 있다.

🔹링크의 종류

내부 페이지 이동
같은 페이지 내 섹션 이동
외부 사이트 이동
CMS 항목 이동

• 랜딩페이지에서는 섹션 이동을 많이 쓴다.
  ex. 상단 메뉴에서 기능 소개를 누르면 같은 페이지의 기능 섹션으로 이동하는 식이다.
  → 이때 Scroll Section 설정이 필요하다.
  고정된 상단 내비게이션이 있다면 Offset 값을 조정해서 섹션이 가려지지 않게 해야 한다.
• 외부 링크는 https://를 포함해야 하고, 새 탭으로 열지 여부도 설정할 수 있다.
  (Framer : 프론트엔드+디자인 이렇게 보면 될 듯)
• 링크는 작은 기능처럼 보이지만, 실제로는 사용자의 이동 경로를 만드는 장치다.
  어디서 어디로 이동하게 할지에 따라 사용자가 화면을 이해하는 방식이 달라진다.
  (그거시... 사용자 경험이니까(끄덕))

 

9. 콘텐츠 삽입과 Insert 패널

• Framer에서는 이미지, 비디오, 아이콘, 폼, 지도, 소셜 임베드 같은 콘텐츠를 넣을 수 있다.
• 이미지는 직접 드래그해서 넣을 수도 있고, 프레임의 Fill로 설정할 수도 있다.
  이미지가 잘릴 때는 Focal Point를 조정해서 중요한 부분이 보이도록 맞출 수 있다.
  (오... 이거 좀 신기함)
• 비디오는 직접 업로드하거나 YouTube, Vimeo 같은 외부 플랫폼을 임베드할 수 있다.
• Insert 패널에서는 페이지 섹션, 내비게이션, CMS 요소, 미디어, 폼, 아이콘, 인터랙션 요소 등을 빠르게 추가할 수 있다.
  처음부터 전부 직접 만들려고 하면 시간이 오래 걸린다.
  Insert 패널을 활용하면 기본 구조를 빠르게 가져오고, 필요한 부분만 수정할 수 있다.
• 다만 템플릿이나 컴포넌트를 그대로 쓰면 화면이 어딘가 익숙해 보일 수 있다.
  실제로 사용할 때는 서비스 목적에 맞게 구조와 문구를 바꾸는 과정이 필요하다.
  (익숙해보이면 사용자가 덜 혼란스럽고 좋을 것 같은데 말이죠... 저작권 도용 문제 정도만 아니면 벤치마킹 아닐꽈)

 

◾Framer 활용 장점

• 아이디어를 빠르게 화면으로 구현할 수 있다.
• 개발 전에 사용자 흐름을 확인할 수 있다.
• 랜딩페이지나 MVP를 빠르게 테스트할 수 있다.
• 디자이너, 개발자와 더 구체적으로 이야기할 수 있다.
• 포트폴리오에서 실제 작동하는 결과물을 보여줄 수 있다.

 

---

 

오늘의 인사이트

 

Framer 흥미롭다 흥미로와...

당장 나의 포폴이 되도록.

 

직접 화면으로 구현하고, 배포까지 해볼 수 있다는 점이 너무 좋았다.

약간 이력서 넣을 때 간지나고(?)

(됴각됴각... 저의 멋진 포폴 사이트를 함 보시죠?가 쌉가능)

이건 제 포폴입니다만..? 훗

 

암튼 흥미가 있어서 그런가 강의도 재밌었다.

그런데 나야 디자인도 하고 개발도 찍먹 정도는 해봤으니 괜찮지만,

다른 분들은 이걸 한 번 듣고 바로 사용할 정도로 이해 가능한가...?라는 의문이 든다.

(내 코가 석자라 걱정할 처지는 아니쥐만...)

 

 

오늘을 마무리하는 한 마디

-

Zep 계속 튕기는데 개열받는다~~~!!!!!

Zep 운영진은 각성하라 우우👎

 

---

 

오늘의 KPT 회고

 

Keep	• Framer를 단순 디자인 툴이 아니라 웹 구조를 만드는 도구로 이해한 점은 좋았다. • Frame, Stack, Grid를 기존 디자인/개발 개념과 연결해서 보니 훨씬 이해가 빨랐다. (+ 포트폴리오 제작에 바로 활용할 수 있겠다는 동기가 생긴 점)
Problem	• Fit Content, Fill Container, Breakpoint는 직접 만져봐야 제대로 익숙해질 것 같다.(금방 익히것지 모..) • 기능 정리는 했지만, 내 포트폴리오에 어떤 구조로 적용할지는 아직 구체화가 필요하다.
Try	• Framer 기능을 익히며, 내 포트폴리오에서 어떤 정보를 어떤 순서로 보여줄지 정리해야겠다.