PM 도전기

[Framer 1-9] 콘텐츠 삽입과 인서트 패널 활용해보기

1. 이미지 추가드래그 앤 드롭 → 원본 크기 기억(Intrinsic Size)하는 프레임 자동 생성프레임 생성 + Fill 이미지 설정 → 직접 그린 프레임에 이미지 채우기레이아웃 메뉴 → Image → 플레이스홀더 이미지 포함 프레임 생성플러그인(Unsplash 등) → 무료 이미지 바로 불러오기원본 크기 복원 → 이미지 우클릭 → Intrinsic Size포맷 지원Raster: JPG, PNG, WebP, GIF, AVIF, TIFFVector: SVG게시 시 자동 최적화 → AVIF 변환 + 해상도 맞춰 리사이징 (Resolution = Auto 권장)위치·품질 조정Fill 모드에서 잘리면 Focal Point로 주요 부분 고정Resolution은 Auto → 성능·퀄리티 자동 최적화2. 비디오 ..

[Framer 1-8] 링크와 네비게이션 구성하기

📍 수업내용 - 링크 기능1️⃣ 내부 페이지로 이동 (Navigation 설정)텍스트 개체 선택 → 링크 스타일 설정Link → Style → New Style 클릭 후 NaviBar 이름 설정색상 설정Edit 클릭 → Default 컬러 & Hover 컬러 설정현재 페이지임을 표시하려면 Current 컬러도 설정같은 스타일 재사용다른 개체에도 동일하게 적용하려면Link → Style에서 만든 NaviBar 스타일 선택2️⃣ 같은 페이지 내 다른 섹션으로 이동 (스크롤 이동)버튼에 Link 설정해당 버튼 선택 → Link → Home 선택섹션 프레임에 이름 부여이동하고 싶은 구역(프레임) 선택 → Scroll Section에서Name에 예: Destination-1 입력버튼에 Scroll Link 설정..

[Framer 1-7] 타이포그래피

📌 추가 수업 메모텍스트 박스 = 프레임 → Stack, Grid에 모두 배치 가능프로젝트 공유 규칙: 프로젝트 간 요소는 공유되지 않지만, 추가한 폰트는 예외로 공유됨Font Weight 조절:일부 폰트는 Font-Weight 값 변경 불가→ Variable Font 모드에서 Weight 속성으로 조절일괄 폰트 변경:Font > Select all element with this font → 해당 폰트가 적용된 프레임 전체 선택→ 다른 폰트로 변경 가능Font Size 모드:Px: 고정 크기 (일반적)Fit: 텍스트 박스 크기에 맞춰 폰트 크기도 자동 변경Line Height 예시:폰트 크기: 25px줄 높이(Line Height): 50px → 한 줄이 차지하는 전체 높이는 50px가 됨1. 텍스트..

[Framer 1-6] Grid 이해하기

1. Grid란?Grid = 행(Row) + 열(Column) 모두를 제어하는 2차원 레이아웃 시스템 비교 항목StackGrid방향 제어단일 방향 (가로 or 세로)가로 + 세로 동시 제어대표 활용텍스트+버튼 배치, 단순 레이아웃갤러리, 카드 리스트, 대시보드 대표 사용 예시갤러리 레이아웃카드형 리스트기능 소개(Feature Bento) 섹션대시보드 화면2. Grid 만들기Frame → Layout → Grid 적용툴바 → Layout → Grid 도구 드래그단축키 Shift + G💡 Grid 생성 시 특징내부에 보이지 않는 셀(Cell) 구조 생성자식 요소(Grid Item)가 각 셀에 자동 배치됨3. Grid 구조Grid Frame (부모) ├── Grid Cells (자동 생성) │ └── G..

[Frame 1-5] Stack 이해하기

1. Stack이란?프레임(Frame)에 특수한 레이아웃 속성을 부여하여 자식 요소를 세로/가로 방향으로 자동 정렬하는 기능Figma의 Auto Layout, CSS Flexbox와 유사마진 계산 없이 일관된 간격 유지 가능한 방향 정렬만 가능(양방향 불가)2. Stack과 Relative PositionAbsolute: 자유 배치, 다른 요소 흐름 영향 없음 (기본값)Relative: Stack/Grid 내부에서 흐름을 따라 배치 (Stack 기본)Fixed: 뷰포트 기준 고정 (스크롤 무시)Sticky: 뷰포트 상단 도달 시 Fixed로 전환Stack 내부 요소는 기본 Relative → 순서대로 정렬·간격 유지Absolute 요소도 넣을 수 있지만 Stack의 흐름에서 제외됨3. Stack 속성속성..

[Frame 1-4] Frame 중심의 사고방식

1. Frame이란?모든 UI 요소는 사실상 Frame텍스트, 버튼, 이미지, 카드 등 → 전부 Frame으로 구성Frame은 콘텐츠를 감싸고, 배치하며, 레이아웃 구조를 결정하는 핵심 단위Frame의 주요 역할역할예시그룹핑텍스트 + 버튼 + 이미지 → 카드로 묶기레이아웃Stack/Grid 기반 정렬 컨테이너뷰포트 대응Breakpoint 내 반응형 위치 조정스타일링테두리, 배경색, 그림자 등 시각 효과 Frame 생성·조작F : Frame 도구 활성화드래그 생성 → Shift: 정사각형 / Alt: 중심 기준 생성여러 요소 선택 → Cmd+Enter: Wrap with Frame부모 Frame 삭제(자식 유지): Cmd+Delete대부분의 실무 레이아웃은 Frame 안에 Frame 형태의 Nesting ..

[framer 1-2] Framer 인터페이스 전체 구조

챕터 2. Framer 인터페이스 전체 구조1. 작업 환경 4대 영역영역설명Toolbar (상단 툴바)프로젝트 설정, 요소 삽입, CMS 연결, 프리뷰, 퍼블리싱Left Sidebar (좌측 패널)페이지·레이어·자산 관리Right Sidebar (우측 속성 패널)선택한 요소의 속성·스타일·인터랙션 설정Canvas (캔버스)디자인 작업이 이루어지는 핵심 공간 4개 영역은 항상 연동되어 작업 흐름을 자연스럽게 연결2. 상단 툴바 (Toolbar)Framer 로고 메뉴: 프로젝트/환경 설정Insert (I): 텍스트, 프레임, 섹션 등 요소 추가Layout / Text / CMS 버튼: 레이아웃·텍스트 요소·CMS 연결Quick Action (⌘+K / Ctrl+K): 명령어·요소 검색 및 실행프로젝트 이름 ..