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)를 관리한다...

서론 중간에 강의 기록을 못했었다..ㅠ 이래저래 일이 바빴어서 블로그에 기록 못했음... 중간 내용이 궁금하시다면?! 직접 강의를 들어보시길..하핫.. 랜선사수가 알려주는 야물딱진 강의다. 타이포그래피의 구조 타이포그래피의 핵심은 '정보의 전달'이다. 적절한 위계를 세우는 것도 매우 중요하다. 그래야 제대로 읽히니깐. 서체(타입페이스) 또한 이미지와 어울리게 잘 골라야 한다. 제대로 서체를 사용하기 전에 서체를 해부해보자. 개인적으로 UXUI 디자인을 하면서 가장 많이 관련있던 것은 font-size, line-height, letter-spacing 이었지만, 다른 것들도 알아보는 시간을 가졌다. Baseline : 베이스 라인을 기준으로 서체-요소, 서체-서체 간 거리를 재기도 한다. Letter-S..

서론 새로운 파트인 UX Strategy 파트로 들어왔다. 이전까지 유저에게 수집한 데이터를 기반으로 우리가 어떤 방향으로 나아가야 할 지 다양한 워크샵을 수행했다면, 그 방향으로 나아가기 위한 전략은 당연히 필요할 것이다. UX 전략이 아마 그 파트가 되지 않을까 싶다. UX Strategy 위에서 쓴 내용에 이어서 작성해보자면 앞으로 어떤 사람들을 대상으로 어떤 경험을 제공하는 어떤 서비스가 되어야겠다라는 구체적인 전략을 수립하는 단계이다. 더블 다이아몬드를 기준으로 첫 번째 다이아몬드가 끝난 다음에 Develop 단계가 시작되기 전에 수립되는 것이 이상적이다. 이러한 UX 전략을 빌드하기 위해선 3가지 참고할 사항이 있다. Alignment with the Vision : 회사의 브랜드나 비전과 일..