FREDDDIE FREDDDIE

3D 툴 만들던 곳에서 2D 툴을..?얼마 전, 웹 기반 3D 디자인 혹은 인터랙션 툴로 알려져 있던 Spline에서 2D 기반의 디자인 기능을 담은 'Hana'를 출시했었습니다. 평소에도 새로운 제품이 나오면 호기심이 생기기에 이번 기회에 써봤습니다.라고 마음을 먹은지 거의 2주가 지나던 차.. Spline 유튜브에 Hana의 튜토리얼 영상이 올라온 것을 보고서 '오늘은 무조건 찍먹해본다.' 라며 다짐하게 됩니다.요새 UI 툴은 업계 표준인 Figma의 레이아웃을 많이 참고하는 듯합니다. 사실 당연하죠, 그래야 러닝 커브도 줄일 수 있으니까요. Hana도 마찬가지였습니다.Hana 체험기1. UI 디자인 툴인가? 프로토타이핑 전용 툴(혹은 인터랙션 디자인)인가? 아니면 얜 뭐임?UI 디자인 툴이라고 보긴..

# 해당 게시물은 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)를 관리한다...

지난 글에서는 구글의 Material 3에 나와있는 타이포그래피 문서들을 읽어보면서 구글이 강조하고 있는 타이포그래피 원칙들에 대해 알아봤었습니다. 오늘은 Material과 함께 양대산맥으로 자리하고 있는 애플의 HIG(Human Interface Guidelines)에 있는 타이포그래피 부분을 살펴보겠습니다. HIG의 Typography Overview 텍스트의 가독성을 확실하게 하기 위해서는 타이포그래픽적인 선택을 해야 합니다. 이를 통해 정보의 위계 질서를 명확히 할 수 있고, 중요한 컨텐츠를 전달할 수 있으며, 브랜드를 뽐낼 수도 있습니다. HIG의 타이포그래피 문서로 이동하면 가장 먼저 보게 되는 설명입니다. 애플이 프로덕트 디자인에서 타이포그래피를 통해 전달하고자 하는 바는 정보 위계의 명확성..