ⓅⒶⓇⓉ ⑦ 3주차 학습일지 첫번째 | 프리스쿨 UI 기초 | Chapter 6 정리 | UIUX 디자인 툴 (Figma) | Chapter 4 정리 | This week Memo

 

📋 오늘의 할 일 📋

💻 프리스쿨 UI 기초 | Chapter 6

💻 UIUX 디자인 툴 (Figma) | Chapter 4

💭 This week Memo

 

 

---

 

 

💻 프리스쿨 UI 기초 | Chapter 6 정리

 

 🗝️Design

 

❶ MAIN

∗ 플랫폼에서 가장 처음 마주하게 되는 화면입니다.

∗ 스플래시나, 취향 분석 등이 메인 앞단에 놓일 수 있습니다.

∗ 플랫폼에서 가장 주요한 화면입니다.

---

❓스플래시? 온보딩? 튜토리얼?

∗ 위에서 나오는 스플래시의 경우는 새로운 앱을 받고 실행 시, 사용자가 처음 보는 화면이더라도 당황하지 않고 서비스를 이용할 수 있게 해주는 장치입니다.

 

➀ 스플래시?

∗ 앱을 실행할 때 가장 먼저 띄워지는 화면, 주로 브랜드 컬러와 함께 로고를 띄워두는 경우가 많습니다.

∗ 앱 시작 시, 간략한 서비스 소개와 함께 가장 빈 페이지가 노출되는 불쾌한 사용자 경험을 줄이기 위해 고안되었습니다.

∗ 가장 빨리 인지되기 때문에 브랜드에 대한 인지도를 강화할 수 있습니다.

∗ 서비스의 성격에 맞는 시간 설정이 필요하지만, 길어질 경우 로딩바 형식처럼 알려주는 시각적 표현이 필요합니다.

 

➁ 온보딩?

∗ 앱에 대한 기본적인 기능을 소개하는 화면으로, 2개 이상의 온보딩 화면을 제공할 경우 ‘건너뛰기’와 같은 선택지를 제공합니다.

∗ 앱의 주요 이점과 기능을 보여줌으로써 사용자의 관심을 사로잡고 온보딩 프로세스를 진행하도록 설득합니다.

∗ 이는 앱 삭제를 막아주고, 회원가입으로 연결하며, 거부감 없이 앱을 사용할 수 있도록 합니다.

∗ 사용자들에게 앱의 내비게이션에 익숙하게 만들어 앱 활용 방법을 학습시키는 역할도 합니다.

 

➂ 튜토리얼?

∗ 온보딩을 완료한 후 필수 앱 기능과 이러한 기능을 효과적으로 사용하는 방법에 대해 상세한 설명을 제공합니다.

∗ 실제 시나리오에 앱의 핵심 기능을 적용할 수 있도록 가이드를 제공합니다.

∗ 복잡한 프로세스를 단순화하여 사용자의 초기 혼란이나 망설임을 최소화합니다.

 

➃ 코치 마크?

∗ 앱 내의 특정 화면이나 요소에 나타나는 오버레이 형태의 화면입니다.

∗ 일반적으로 관련 버튼 또는 UI 요소 위에 표시되며 여러가지 용도로 사용됩니다.

∗ 잠깐 나타나거나, 한 번의 클릭으로 간단하게 끝나는 것이 특징입니다.

∗ 숨겨진 기능이나 잘 알려지지 않은 기능에 주목하여 사용자가 앱의 기능을 인식하도록 합니다.

---

➋ PROCESS

∗ 특정 프로세스를 수행하는 단계의 화면은 많이 사용되는 화면들 중 하나입니다.

∗ 상단 GNB 영역 하단에 현재 프로세스 진행 상태를 표기하기도 합니다.

 

➌ DETAIL

∗ 특정 카테고리나 메뉴의 마지막 페이지 내용을 보여주는 화면을 상세 화면이라고 합니다.

∗ 상세 화면은 내용이 많은 편에 속하며, 여러 정보를 확인할 수 있는 페이지입니다.

 

 

---

 

 

💻 UIUX 디자인 툴 Chapter 4 정리

 

⚡️컬러와 스타일

∗ 컬러는 다양한 표기법이 있는데, 피그마에서는 Hex, RGB, CSS, HSL, HSB 로 표기할 수 있다.

∗ 이 때, 단색인지 알파값 (Opacity)가 부여되어 있는지 확인을 해줘야 한다.

∗ 스포이드(I)를 이용해 해당 피그마 내에 있는 컬러를 선택해 쉽게 컬러를 복사할 수 있다.

 

❶ 스타일 등록하기

∗ 자주 이용하는 컬러 및 해당 도형의 속성을 스타일로 지정해서 원할 때 불러내서 사용할 수 있다.

∗ 스타일을 지정 후, 해당 스타일을 사용해 디자인하고 이후 수정을 원할 때는 스타일 수정으로 일괄 수정이 가능해진다.

∗ 스타일로 등록할 수 있는 요소는 총 네 가지로, Text, Color, Effect, Grid 이다.

(❗️디자인 시에, 일괄 스타일 변경이 필요해질 수 있으니 꼭 스타일을 등록해서 사용하자)

 

❷  Material Design Color system

∗ 주요 색상을 선정 후, 채도 및 명도를 보정하여 5가지 보색을 생성합니다. (Primary - Secondary - Tertiary - Neutral - Neutral Variant)

∗ 각 보색에 따라 값을 조정하여 톤 팔레트를 생성한 뒤, 역할에 따라 톤을 할당합니다.

∗ 해당 색상의 역할은 UI 요소에 반영되어 스타일로 만든 뒤, 역할에 맞는 컬러를 선택하면 자동으로 색상이 변경됩니다.

 

⚡️토큰의 활용

∗ Tailwind Color Generator 플러그인을 활용해 Primary, Secondary 컬러에 대한 Variant를 자동으로 생성할 수 있다.

∗ Tokens Studio for Figma 플러그인을 활용하면 토큰이라는 변수값을 생성할 수 있는데, Light, Dark Mode 변경이 가능해진다.

➕ 강의 내에서는 variable이 없는 버전이라 별도로 토큰을 이용해 이를 변수로 설정해서 변경이 가능하도록 하는데, 현재는 variable 기능이 생겨서 해당 플러그인이 작동이 되지 않는 것 같다 (뇌피셜)

 

⚡️타이포그래피?

∗ 역할에 따라 폰트의 크기를 지정해주어야 하는데, 보통 Medium을 16px 기준으로 두며, 배수에 맞춰 폰트 사이즈를 조절해주는 것이 중요하다.

∗ 이 때, Typescale 사이트를 참조할 것.

∗ 보통 1.33 스케일에 맞춰 폰트 사이즈를 조절한다.

∗ 용도에 따라 Heading, Table, Paragraph로 크게 구분 짓고, 세부적인 Typography를 설정하여 사용할 것. 

 

 

---

 

 

💭 This week Memo

∗ UIUX는 프로덕트 사용자 경험을 만드는 일으로, 비주얼을 통해 사용자들이 어떤 것을 느낄 수 있도록 할 것인지 고민하는 것이 중요하다.

∗ UIUX디자이너는 단순히 툴을 다루는 사람이 아닌 문제해결자이다.

∗ UI 자체를 어떻게 설계하냐에 따라 사용자 경험이 천차만별이 될 수 있다.

∗ 디자이너가 어떤 것을 개선시킬 수 있고, 그를 위해서 실행할 수 있는 아이템이 무엇인지 고민하자.

❓메인화면의 사용성을 어떻게 개선시킬 수 있을까?

❓소비자들의 첫 화면에서 어떤 경험을 주고 싶은 걸까?

❓어떻게? 를 만들어 내야한다.

🟰 왜 해야 되는지에 대한, 문제 해결을 위한 습관을 기르는 힘.