FREDDDIE FREDDDIE

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다. 배워볼 것 컴포넌트, Variants, Variables, Hover & Pressed Status Components와 Variants 컴포넌트 생성 단축키 : Option(Alt) + Command(Ctrl) + K 컴포넌트를 만들면 해당 컴포넌트를 편집할 수 있는 페이지로 이동합니다. 컴포넌트의 Variant들과 Hover, Pressed 상태 등도 이 페이지 내에서 관리합니다. 컴포넌트 세부 페이지로 이동하려면 컴포넌트를 더블클릭하거나 왼쪽 패널의 Assets 탭에서 편집하고 싶은 컴포넌트를 클릭하면 됩니다. 만들어진 컴포넌트는 기본적으로 Primary 컴포넌트가 되며 오른쪽으로 Va..

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다. 배워 볼 것 링크 삽입, 스크롤 섹션 엘리먼트에 링크 삽입 (Link 프로퍼티) Link 프로퍼티 단축키 : L 프레이머에는 특별한 기능이 있습니다. 바로 텍스트, 프레임 등 엘리먼트에 링크를 넣을 수 있다는 점인데요. 이를 활용하면 로그인 페이지 등 다른 페이지로 이동하는 버튼 등으로 활용할 수 있습니다. 당연히 코드 기반으로 실제 동작한다는 점이 매력적이고요. Link 기능은 엘리먼트를 선택하면 나오는 오른쪽 Properties 패널에서 사용할 수 있습니다. 클릭하게 되면 우선 '어느 페이지'로 이동시킬 건지 혹은 '어느 URL'로 이동시킬 건지 선택해야 하고, 선택에 따라 조금 다른 옵..

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다. 배울 것들 컬러 스타일 추가, 커스텀 폰트 업로드, 배경 이미지 추가, 기본 컴포넌트 사용 히어로 섹션(Hero Section) 히어로 섹션은 웹 및 모바일 애플리케이션 디자인의 중요한 부분으로, 사용자의 관심을 끌고 주요 메시지나 CTA를 전달하는 중심 요소로 작용합니다. 유저의 이목을 끌고 2~5초 안에 핵심 아이디어를 전달하는 중요한 역할을 합니다. 히어로 섹션을 디자인할 땐 시각적 위계, 디자인 미학, 효과적인 콘텐츠 작성 및 모바일 반응성 등을 고려해야 합니다. 컬러 스타일 추가 프레이머도 당연히 재사용성을 높이기 위해 컬러 스타일을 지정할 수 있습니다. Properties 패널에 ..

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다. Layout Stacks, Grids를 활용해 레이아웃을 스타일링 할 수 있습니다. 마치 CSS의 Flexbox나 Figma의 Auto Layout 같은 옵션입니다. Layout 프로퍼티는 Stack과 Grid 2가지 타입이 있습니다. Stack : Layout이 적용된 프레임 안의 모든 엘리먼트들을 특정 방향으로 정렬합니다. Direction : 정렬 방향을 가로, 세로로 정합니다. Distribiue : Stack이 적용되는 엘리먼트들의 간격을 분배합니다. Start, Center, End, Space Between, Space Around, Space Evenly 옵션이 있습니다. Al..

# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다. 배워볼 것 이번 강의에선 크게 Canvas, Frames, Breakpoints 3가지를 배워볼 예정입니다. 상단 바는 프레이머의 주요 기능들을 사용할 수 있는 메뉴들이 있다. Insert : 프레이머에서 기본으로 제공하는 디자인 에셋들이나 CMS, 혹은 HTML을 붙여넣거나 피그마에서 디자인 파일을 불러오는 것도 가능하다. Layout : 레이아웃 빌딩의 기초가 되는 Frame, Rows, Columns, Grid, 이미지나 비디오를 넣을 수 있다. Text : 텍스트 레이어를 추가한다. CMS : 블로그용으로 쓰기도 하는 CMS(Content Management System)를 관리한다...