46일차[framer]

Framer 학습 기록 — 챕터 5-6, 5-7, 5-8 + '목록' 버튼 직접 만들기+영어공부

오늘은 Framer의 세 가지 주제를 학습했다. 템플릿 활용, Figma/Web에서 가져오기, Sticky/Fixed 포지셔닝. 거기에 더해 작업 중인 Airbnb 클론 프로젝트에 '목록' 버튼 컴포넌트를 직접 추가해봤다.

세 챕터를 관통하는 키워드를 먼저 적어두자면:

• 속도: 0에서 시작하지 않고, 템플릿·Figma 디자인을 출발점으로 삼는 법
• 구조: 섹션 단위로 쪼개고 Stack/Layout으로 묶는 사고방식
• 맥락: Fixed/Sticky처럼 "부모 구조"를 먼저 잡아야 작동하는 기능들

. . .

챕터 5-6. Framer 템플릿 — 빠르게 시작하는 법

Framer 마켓플레이스에는 무료/유료 템플릿이 있다. 무료는 'Use for free'를 누르면 내 대시보드로 바로 복사되고, 유료는 결제 후 이메일 링크로 받는다. 복사된 템플릿은 일반 프로젝트와 똑같이 자유롭게 수정 가능하다는 게 핵심.

PM 관점에서 보면 템플릿은 **"가설을 빠르게 검증하기 위한 출발점"**이다. 0에서 시작하지 않고, 비슷한 톤의 템플릿을 가져와서 빠르게 프로토타입을 만들고 사용자 반응을 보는 방식.

→ **"처음부터 완벽하게 만들지 말고, 빠르게 만들고 빠르게 고친다"**는 원칙과 잘 맞는다.

. . .

챕터 5-7. Figma & Web에서 가져오기 — 섹션 단위로 쪼개기

Figma 디자인을 Framer로 옮기는 워크플로우. 핵심은 전체를 한 번에 가져오지 말고 섹션 단위로 복사하는 것.

자주 발생하는 오류와 해결법

• 레이어 순서 오류 → Bring to Front
• 마스킹 오류 → Mask radius 조정
• SVG 깨짐 → Figma에서 다시 내보낸 후 드래그 앤 드롭

반응형 작업 포인트

• 텍스트·버튼은 Stack으로 묶고 정렬/간격 설정
• 텍스트는 반드시 Fill width로 설정 (화면 줄어들 때 잘림 방지)
• 섹션 단위로 상위 Stack에 묶기, 전체 Frame도 Layout으로 (Gap = 0)
• Breakpoints는 상위 설정이 하위로 자동 상속

→ 섹션 단위로 쪼개는 사고방식이 인상적이었다. 디버깅도 쉽고 책임 범위도 명확해진다. 디자인뿐 아니라 프로덕트 전체를 만드는 사고방식과 닮아있다.

. . .

챕터 5-8. Sticky / Fixed 포지셔닝 — 결국 부모 구조가 핵심

항목FixedSticky

동작	스크롤과 무관하게 고정	스크롤 중 특정 위치에서 잠시 고정
기준	브라우저 뷰포트	부모 프레임의 상단/하단
사용 예	상단 네비, 플로팅 버튼	사이드 카드, 섹션 헤더
부모 조건	Breakpoints Frame의 직접 자식	Stack/Grid 자식 + Overflow: Visible
주의	z-index 확인	Overflow: Visible 필수

→ 두 포지셔닝 모두 부모 요소의 구조와 설정이 핵심. 구조를 미리 안 잡아두면 "왜 안 되지?" 하고 한참 헤매게 된다. 구조부터 잡고 작업하는 습관이 중요하다.

. . .

실습. '목록' 버튼 컴포넌트 만들기

Framer Workshop의 컴포넌트 생성 기능을 활용해서, Airbnb 클론 상세페이지에 **"목록으로 돌아가는 버튼"**을 추가했다.

요구사항 정의

• 정상: 목록 → 상세 → 목록 버튼 → 이전 목록 페이지로
• 예외: 새 탭에서 상세에 바로 진입한 경우 (history 없음) → fallbackUrl로 이동

처음엔 document.referrer로 검증하려 했지만, Framer 미리보기 환경에서 referrer가 불안정해서 결국 window.history.length > 1로 판단하는 방식이 더 안정적이었다.

최종 로직

 

 

js

if (window.history.length > 1) {
  window.history.back()
} else if (fallbackUrl) {
  window.location.href = fallbackUrl
}

시행착오 3가지

1. 404 페이지가 뜸

• 원인: fallbackUrl이 기본값 /로 되어있고, referrer 체크에서 fallback으로 빠짐
• 해결: window.history.length 기반 체크로 수정

2. 디자인 톤 안 맞음

• 원인: 처음엔 검정 사각형 버튼 → 페이지의 다른 알약 모양 버튼들과 충돌
• 해결: 색상 #FFB3C9 핑크 + 알약 형태로 변경, 페이지의 다른 핑크 포인트들과 톤 통일

3. 반응형 레이아웃 깨짐 (← 오늘 배운 내용과 직결)

• 원인: 버튼이 이미지와 같은 Stack에 묶여있지 않음. 화면이 넓어지자 버튼만 왼쪽으로 떨어져 나감
• 해결: 오늘 배운 Layout/Stack 개념으로 이미지+버튼을 같은 Stack에 묶음

 

.

.

.

.

.

 

 

나중에 영어 때문에 원하는 회사에 지원하지 못할 수도 있을 것 같아서 영어공부를 시작함.

나에게 맞는 방식을 찾아가는 중