0507 | 심화 과제 주간 시작!

Day 43 (9주차)

시간	학습내용	소요시간	메모
아침	쇼츠중독 & 틸꾸		반성합니다
점심 전	Framer [3-1]~[3-7]
Arvo	역기획 PRD 작성
Evening

Framer

Chapter1 ~ Chapter3

---

1. 인터페이스 및 기본 조작

• 화면 구성: 상단 툴바, 좌측 기능 사이드바, 우측 속성바를 통해 작업 환경이 구성됩니다.
• 주요 단축키:
  • Ctrl / Cmd + K: 메뉴 검색창 열기
  • Ctrl / Cmd + Del: 종속 관계를 끊고 부모 프레임만 삭제
• CMS 이동: CMS 버튼을 클릭하면 CMS 관리창으로 바로 이동
• Breakpoint: Desktop, Tablet, Phone 등 사이즈 기준으로 설정

2. 페이지 및 홈 설정

• Home 설정: 도메인 주소 뒤에 /가 붙지 않는 가장 첫 번째 랜딩 페이지(Root)
  • Home 변경 시: set new home 기능을 통해 홈페이지를 변경하면 기존 Home은 자동으로 old-home으로 이름이 바뀜.
• 페이지 추가: /page, /login, /address, /profile 등 하위 경로를 설정할 수 있으며, 나중에 폴더 구조로 변경하여 관리할 수 있습니다.
• 페이지 설정: Meta Data인 Title과 Description을 설정하여 SEO 및 검색 노출을 관리합니다.

3. 레이아웃 시스템 (Frame, Stack, Grid)

Frame

• 생성 방식: Space를 누른 채로 프레임을 드래그하면 종속되지 않고 독립적인 요소로 생성됩니다.
• 자식 프레임 생성: 요소를 먼저 생성한 후 다중 선택 → 우클릭 → Add Frame을 통해 감쌀 수 있습니다.

Stack (Figma의 Auto Layout과 유사)

• 가로, 세로 1줄로 요소를 배치할 때 사용합니다.
• Position: Absolute(내가 놓은 위치 그대로)와 Relative(주변 요소와의 관계 중심)로 구분됩니다. 파란 점선은 위치와 배치의 기준을 나타냅니다.
• Stack 적용 방법:
  1. 자식 요소 선택 후 Add Stack
  2. 프레임 선택 후 Add Stack/Layout
  3. 부모 프레임의 Layout 설정 변경

Grid

• 격자 형태로 요소를 배치합니다. (예: 2x2, 2x1 등)
• 사이즈 변화: 내 프레임의 사이즈를 조절하거나, 특정 프레임을 선택하여 Column / Row Span을 적용해 영역을 확장할 수 있습니다.

4. 컴포넌트 및 Breakpoint 활용

• Breakpoint 관리:

  • Desktop이 원본이며, 나머지는 연결되어 재설정(Override)되는 구조.
  • 어느 브레이크포인트에서 추가하느냐에 따라 추가되는 브레이크 포인트의 스타일이 결정됨.
  • 요소 리셋: 모든 속성을 초기화.
  • 속성 리셋: 특정 속성만 초기화.
  • Breakpoint에서 삭제(Del) 시, 삭제가 아닌 Visible Off 처리.
  • 하위 Breakpoint에서의 변경사항은 상위(부모)에 영향을 주지 않음.

• 컴포넌트(Component):

  • 이름 규칙: /컴포넌트 타입/이름 또는 폴더 구조를 활용하여 체계적으로 관리.
  • 변수(Variable): 속성 좌측의 + 버튼을 눌러 속성을 변수로 지정하면, 외부에서 세부 조정이 가능. (레이아웃 템플릿 등에 활용)

5. CMS (Content Management System)

• 기본 개념: 데이터들의 집합체인 Collection을 관리.

  • Slug: 주소창에 적힐 고유한 문자/숫자열이며, 아이템별 고유 번호 역할.
  • Collection Name: 명확한 규칙을 가지고 이름을 지정하는 것이 중요.

• CMS 레이어 배치: 카드 컴포넌트 하위에 CMS 레이어를 배치하고, 프레임의 Fill, Content 등에 CMS Column 변수를 연결하여 데이터를 연동.

• 데이터 제어:

  • Limit to: 노출할 데이터의 개수를 제한.
  • 수동 정렬: CMS Field에 'order' 항목을 추가한 뒤, Sorting 설정에서 order 순으로 정렬.

6. CMS 페이지 및 조건부 렌더링

• CMS 상세 페이지: Pages → + → New CMS Page를 통해 특정 Collection의 디테일 페이지를 생성.

  • CMS 페이지의 수정 사항은 해당 Collection의 모든 아이템에 광역 적용됨.

• Index Page: Insert에서 가져오는 것과 같은 아이템 목록 페이지.

• 조건부 렌더링: 적용하고 싶은 요소의 특정 속성 옆 +를 눌러 Set Variable을 설정함으로써 조건에 따라 요소를 보여주거나 숨길 수 있음.

7. 기타

• Code Block: 코드 삽입 시 사용합니다.
• Heading 1: 웹페이지를 대표하는 가장 중요한 제목 내용에 적용.
• 이미지: 프레임을 씌워서 사이즈를 조절하는 방식을 권장.
• Min/Max: 유동적으로 변하는 범위(Range)를 설정할 때 활용.