LAZY CAT님의 아티클

User Flow #2 : 나만의 유저 플로우 만들기

오늘은 나만의 유저 플로우를 만들어 보려고 한다! 🙋‍♀️ User Flow의 세 가지 법칙 1. Purpose : 나의 유저 플로우의 목적은? 저번 포스팅에서 다루긴 했지만, 가장 처음으로 해야할 것은 사용자의 목표, 목적을 정하는 것이다. 유저의 성취/달성 즉, 단계의 최종 목적지를 써야 한다. 그 목적을 달성하기 위해 사용자가 어떻게 이동하는 지 경로를 그려나가는 것이다. 2. Go in One Direction : 너무 많은 변수를 생각하지 말 것 유저 플로우를 그리다보면, 사용자의 다양한 흐름을 상상하게 된다. '이렇게 가면 어떡하지?'라는 생각이 들 수밖에 없다. 하지만 유저플로우는 내가 정한 목적에 맞게 사용자가 움직이는 가장 이상적인 경로를 그리는 것이다. 만약 어떤 흐름에서 이탈이 있을 ..

https://seo-jyun-0731.tistory.com/11

User Flow #1 : 유저 플로우란?

얼마 전 디자인시스템 시리즈를 다 마치고 나서 돌아온 새로운 UIUX 방법론 시리즈! 이번 시리즈에서는 User Flow에 대해 알아보려 한다. User Flow는 어려운 개념이 있는 것도 아니고 시작하기 어렵지도 않아서 비교적 할 만하다. 그래도 정말 많은 칼럼을 뒤져보며 혼자 정리해본 내용들을 가공해 올려보려고 한다. 💬 User Flow는 언제 시작하면 될까? 내가 처음에 User Flow라는 개념을 접하고 난 뒤, 떠오른 생각이었다. User Flow는 언제 시작하는 것이 좋을까? 만약 내가 아이디어 기획부터 디자인 완성까지 주도하는 개인 프로젝트라면, 서비스에 관한 내용들을 모두 정한 후 대략적인 메인 화면 구성과 함께 시작하는 것이 좋다. 유저 플로우는 기초 OF 기초이기 때문에 초기 단계에 ..

https://seo-jyun-0731.tistory.com/10

Design System #4 - UI 라이브러리 만들기

벌써 마지막 포스팅이라니! 신난다(?) 오늘은 UI Library를 만드는 방법에 대해 알아보고 디자인시스템을 마무리해보려고 한다. ✅ Creating a user interface library 그런데 UI Library는 뭘까? 저번 포스팅에서는 Visual Language를 구축하는 법에 대해 배웠다. 그것에는 컬러, 간격, 마진 등의 와아아안전 기초적인 요소가 포함된다. 하지만 UI Library에는 카드, 버튼, 리스트 등의 한 묶음을 다룬다. Visual Language의 다음 단계라고 볼 수 있다. 그런데 UI Library에도 단계가 있다. 👉 Atomic Design 아톰 디자인은 디자인시스템을 만들 때 가장 보편적으로 사용하는 모델이라고 생각하면 된다. 원자에서부터 세포, 조직의 과학적..

https://seo-jyun-0731.tistory.com/9

Design System #3 - 비주얼랭귀지 구축하기

오늘은 Visual Language를 어떠한 기준으로 분류하여 만들어야하는지 알아볼 것이다. 본 포스팅은 InVision에서 무료로 제공하는 핸드북을 번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다. 🤔 Creating A Visual Design Language 이제 본격적으로 Visual Attributes에 해당하는 Visual Design Language를 제작해볼 것이다. 기본적으로는 다음과 같은 요소가 포함된다. 1. Color 2. typography (size, leading, typeface, ...) 3. Spacing (margins, paddings, positioning coordinates, border spacing, ...) 4. Images (icon..

https://seo-jyun-0731.tistory.com/8

Design System #2 - 디자인시스템 설계의 시작

오늘은 저번 포스팅에 이어 디자인시스템의 한계처럼 느껴지는 것이 무엇인지, 나의 디자인시스템을 구축할 때 무엇부터 시작해야 할지 알아보려고 한다. 본 포스팅은 InVision에서 무료로 제공하는 핸드북을 번역하여, 내가 이해한대로 디자인시스템의 중요 포인트와 핵심만을 담았다. 🖼 디자인시스템에 관한 걱정 디자인시스템을 만들기로 작정했다면 제일 먼저 이런 걱정이 들 것이다. '특정한 구역에 해당 컴포넌트가 잘 들어맞지 않는다면? 나는 그 구역에 제일 적합한 디자인은 포기하고 원래 있던 컴포넌트를 사용해서 디자인 채무(Design Debt)를 줄여야 하나?' 바로 Too Limiting에 관한 걱정인 것이다. 하지만 이 책에서는 이렇게 설명한다. 대부분의 디자이너들은 어떠한 문제가 생겼을 때 새로운 디자인을..

https://seo-jyun-0731.tistory.com/7

Design System #1 - 디자인시스템이란?

UIUX 공부를 시작하면서 한번쯤은 접하게 될 디자인시스템! 처음엔 그런가보다 하고 넘겼지만, 접하면 접할수록 디자인시스템은 중요한 개념인 것 같아 시리즈로 포스팅을 제작하기로 했다. 이 포스팅은 외국 디자인회사 InVision에서 제작한 핸드북을 바탕으로 요약 및 정리해 본 자료다. 참고로 저 핸드북은 모조리 영어다.. 내가 영어를 잘 하는 것은 아니지만 그래도 열심히 혼자 읽으며 정리했다 ㅠ 🖼 디자인시스템은 왜 존재할까? 디자인시스템은 Reusability(재사용성) 단 하나를 위해 존재한다고 해도 과언이 아니다. 큰 회사의 경우에는 많은 디자이너가 같은 디자인 형태를 만들어내야 하기 때문에, 기존에 썼던 디자인 요소를 반복해서 사용하는 경우가 많을 것이다. 그런데 디자인시스템이 존재하지 않는다면,..

https://seo-jyun-0731.tistory.com/6