카테고리 없음

Framer 강의 완강

j-node 2026. 7. 3. 20:36

Ch.2 컴포넌트 & 반응형 레이아웃 구성

1. 컴포넌트(Component)와 변수(Variable) 활용

  • 컴포넌트화: 자주 쓰는 요소는 우클릭 후 Create Component로 등록하여 재사용함. (예: /buttons/primary)
  • 상태 분기: 하나의 컴포넌트 내에서 Hover, Pressed 등 유저 인터랙션에 따른 디자인 변형(Variant)을 쉽게 관리함.
  • 변수(Variable) 처리: 컴포넌트 내부의 텍스트 내용(plain text)이나 특정 요소의 노출 여부(visible)를 외부에서 변경할 수 있도록 변수로 추출하여 제어함.

2. 반응형(Responsive) 웹 디자인 법칙

  • 고정 크기 배제: Absolute 배치 대신 Stack 구조를 디폴트로 사용함.
  • 최대 너비 설정: 화면이 무한정 커지는 것을 방지하기 위해 컨테이너에 Max Width 제한(예: 1200px)을 걸어줌.
  • 텍스트 & 이미지 최적화:
    • 텍스트는 Width: Fill, Height: Fit Content로 설정하여 글자 수에 따라 유연하게 늘어나도록 함.
    • 이미지는 그냥 넣지 말고 부모 프레임(Wrapper)으로 감싼 뒤 부모를 Width: Fill로 지정, 이미지는 비율 자물쇠를 채워 Relative로 설정함.
  • 브레이크포인트(Breakpoint): 데스크톱(Primary)을 기준으로 하되, 태블릿/모바일로 갈수록 레이아웃을 세로 방향(Direction: Column)으로 바꾸거나 덜 중요한 요소를 숨김(Visible: No).

Ch.3 CMS(콘텐츠 관리 시스템) & 다이내믹 라우팅

1. CMS 컬렉션 구축

  • 개념: 에어비앤비 숙소 리스트처럼 반복되는 데이터를 효율적으로 관리하기 위한 테이블 시스템임.
  • 필드(Field) 정의: Title, SubTitle, Image 외에도 Toggle(예: 세일 여부, 추천 글 여부)이나 Slug(URL에 들어갈 고유 문자열) 등을 정의함.

2. 리스트 연결 및 필터링

  • 카드/리스트 연동: CMS Collection을 디자인한 카드 스택과 연결하여 동적으로 데이터를 뿌려줌.
  • 정렬 및 필터: Content 패널에서 Sorting, Filters 조건을 걸어 특정 항목만 노출하거나 원하는 순서(오프셋, 리미트 설정 등)로 제어함.

3. 상세 페이지 구현 (Dynamic Routing)

  • 동적 페이지 생성: New CMS Page를 생성하면 각 아이템별 상세 페이지가 자동으로 라우팅됨. 한 페이지의 스타일을 고치면 모든 CMS 상세 페이지에 일괄 적용됨.
  • 조건부 렌더링: 데이터 유무나 토글 조건(예: isNew)에 따라 특정 뱃지나 서브 이미지가 보이거나 숨겨지도록 Visible 속성에 변수를 매핑함.

Ch.4 데이터 분석(GA4) 및 유저 응답 수집(Form)

1. 외부 분석 툴 연동

  • GA4 (Google Analytics): 데이터 스트림의 측정 ID를 복사한 뒤, Framer Site Settings > Google Analytics에 붙여넣고 배포하면 끝. 주로 '보고서(획득/참여)'와 맞춤형 분석을 위한 '탐색(자유 형식, 유입경로/경로 탐색)'을 활용함.
  • GTM & VWO: 특정 피처 클릭 추적(GTM)이나 A/B 테스트(VWO)를 위해 제공되는 스크립트를 Framer의 Custom Code (Head tag) 영역에 삽입하여 연동함. (※ 유료 플랜 기능)

2. 사용자 응답 수집 폼(Form Builder)

  • 컴포넌트 구성: Input Field 종류(Text, Select, Checkbox, Radio)를 목적에 맞게 배치하고 Required(필수값) 여부를 지정함.
  • 접근성(Accessibility): 스크린 리더와 SEO를 위해 각 인풋에 맞는 Label을 매핑함.
  • 데이터 전송: 폼 제출 시 성공 메시지 또는 리다이렉트 설정을 하고, 데이터를 수집할 목적지(Google Sheets 연동 또는 Make Webhook을 통한 API 연결)를 지정함.

Ch.5 사이트 설정, SEO, 고급 포지셔닝

1. Site & Page 세팅 구분

  • Site Settings (일괄 적용): 사이트 대표 타이틀, 설명문(Description), 파비콘(Favicon), 소셜 공유용 오픈그래프 이미지(og:image), 패스워드 보호 기능 등 설정.
  • Page Settings (개별 적용): 특정 페이지의 타이틀 및 설명을 다르게 주어 검색 최적화 정밀도를 높임. (타이틀은 60자 이내, 설명은 160자 이내 권장)

2. 배포(Publish) 및 커스텀 도메인 연결

  • Framer 구동 방식: React 기반이라 JS 로딩 시간이 필요하지만, 서버에서 사전 렌더링을 해주므로 유저에게 빈 화면 대신 콘텐츠를 즉시 보여줌.
  • 배포 제어: 라이브 도메인 연결 전에 테스트할 수 있는 Staging 환경을 지원하며, 버전 되돌리기 및 배포 중단(Unpublish)도 가능함.
  • DNS (Domain Name System): 숫자로 된 복잡한 IP 주소(예: 76.76.21.21)를 사람이 읽기 쉬운 문자 주소(예: mybrand.com)로 변환해 주는 인터넷 전화번호부 시스템임.
  • DNS 레코드 등록 수동 연결:
    • A 레코드 (Address Record): 도메인 이름을 특정 IPv4 주소로 직접 연결해 주는 레코드임. 사용자가 도메인을 입력하면 지정된 IP를 가진 서버로 접속하게 함.
      • A 레코드 설정 (루트 도메인용): 내 도메인 자체(mybrand.com)를 Framer 서버 IP로 직접 연결함.
        • Type: A / Name: @ / Value: 76.76.21.21
        • Type: A / Name: @ / Value: 76.76.22.22
    • CNAME 레코드 (Canonical Name Record): 도메인 이름을 IP가 아닌 다른 도메인 이름(별칭)으로 연결해 주는 레코드임. 특정 서브도메인(예: www)을 대표 도메인으로 포워딩할 때 주로 사용함.
      • CNAME 레코드 설정 (www 서브도메인용): [www.mybrand.com](https://www.mybrand.com)으로 들어와도 Framer 주소로 연결되도록 별칭을 지정함.
        • Type: CNAME / Name: www / Value: sites.framer.app

3. SEO 및 접근성(Accessibility) 최적화

  • 시맨틱 태그: 스타일 설정 시 중요도에 따라 H1 ~ H6 태그를 순차적으로 부여하여 검색엔진 탐색을 도움. 검색엔진 점수가 나온다고 함.
  • 대체 텍스트: 이미지나 아이콘에 Alt text 또는 Aria_Label을 작성하여 스크린 리더가 인식할 수 있게 함.
  • 기타: 키보드 탭 이동 순서를 결정하는 Tab index, 검색엔진 수집을 막는 Google bot - Skip 설정 등을 활용함.

4. 고급 포지셔닝 (Sticky & Fixed)

  • Fixed: 브라우저 뷰포트 기준 고정 (예: 스크롤해도 고정된 네비바).
  • Sticky: 스크롤되다가 특정 위치에 도달하면 붙음.
    • 주의: Sticky를 쓰려면 상위 프레임이 반드시 Stack 또는 Grid여야 하며, 모든 부모 요소의 Overflow가 Visible 이어야 정상 작동함!

오늘의 인사이트, 느낀 점

  • 생각보다 figma에서 framer로 가져와서 원상 복구하는 게 꽤 오래 걸림. 손에 익을 때까지 연습해야겠다...!
  • 다크모드의 모든 스타일 지정해주는 것도 오래 걸림.
  • SEO 점수라는 게 있다는 것을 처음 알았음. 위계와 accessibility를 상세히 잘 설정해야겠다.
  • 노트북이 이제 슬슬 못 버팀...