오늘의 멜 로빈스 만트라 ‼️
뇌의 긍정적 오버라이드 (Overriding the Brain Positively)

"I need to give myself more credit for how hard I’m trying."
내가 얼마나 열심히 노력하고 있는지에 대해 스스로에게 더 많은 인정을 해줘야 한다.

우리는 하루 일어난 일 중 잘 되지 않은, 부정적인 것에만 집중하게 된다. 그렇지만 우리는 하루 동안 많은 일들을 성공해왔다. 아침에 일어나는 것부터, 운동을 하고, 공부를 하고. 해낸 것에 집중하며 긍정적으로 사는 마인드를 장착하자 🥰

사용자 중심 디자인 (UCD)

User-Centered Design으로, 좋은 UI/UX 디자인을 위한 기본 원칙이다.

주요 디자인 원칙

시각적 계층 구조 (Visual Hierarchy)

사용자가 화면에서 가장 중요한 정보나 액션을 쉽고 빠르게 파악할 수 있도록
요소들의 크기, 색상, 대비, 위치 등을 조절하는 것

일관성 (Consistency)

앱 내의 모든 화면과 상호작용 방식이 통일성
사용자가 예측 가능한 경험을 하게 하여 사용성을 극대화
ex) 모든 확인(Confirm) 버튼은 초록색, 모든 경고(Warning) 메시지의 아이콘은 동일하게 사용.

---

앱 디자인의 구조 및 주요 화면

앱 화면의 구성 요소

헤더 (Header)
: 앱의 브랜딩 (로고), 현재 위치 (화면 제목), 글로벌 액션 (뒤로 가기, 설정, 검색 아이콘) 등

메인 콘텐츠 영역 (Main Content Area)
: 사용자가 앱을 사용하는 주된 목적에 해당하는 정보(텍스트, 이미지 등)가 들어가는 핵심 영역

푸터 (Footer)
: 주요 내비게이션 바나 저작권 정보, 약관 등 보조적인 정보 등

주요 화면 예시

온보딩 화면 (Onboarding Screen)
: 앱을 처음 설치한 사용자에게 앱의 핵심 가치와 주요 기능을 간결하게 소개하는 화면

➡️ 사용자를 앱 환경에 후킹(Hooking)하여 다음 단계(회원가입/로그인)로 자연스럽게 유도

고려 사항:

• 메시지의 정확성: 앱의 장점을 명확하게 전달해야 함
• Skip 기능 포함 여부: 사용자의 선택권을 존중하기 위해 Skip 또는 건너뛰기 기능을 포함

---

디자인 프로세스 개요 (Design Process Overview)

: 제품 디자이너가 기능을 화면으로 구현하는 기본적인 단계

1. 사용자 요구 분석 (User Requirements Analysis)
: 사용자가 진정으로 원하는 것과 해결해야 할 문제(Pain Point)를 정의하는 단계

2. 와이어프레임 작성 (Wireframe Drafting)
: 앱 화면의 뼈대(Skeleton)를 잡는 단계
-> 요소들의 배치와 레이아웃에 중점을 두며, 시각적인 디테일은 배제

3. UI 스타일 가이드 적용 (Applying UI Style Guide)
: 와이어프레임에 색상, 타이포그래피, 컴포넌트 등 미리 정의된 디자인 시스템을 적용

4. 프로토타입 제작 (Prototype Creation)
: 사용자가 실제로 화면을 넘기고, 버튼을 클릭하며 앱을 사용하는 것처럼 상호작용(Interaction)을 테스트할 수 있도록 만드는 단계

---

🛠️ 피그마 실습: 폼 구성 요소

1. 레이블 (Label)
: 입력 필드(Input)가 무엇을 입력받아야 하는지 설명하는 텍스트

2. 입력 필드 (Input Field)
: 사용자로부터 실제 텍스트나 데이터를 입력받는 영역

3. 보조 텍스트 (Supporting Text)
: 추가적인 설명, 유효성 검사 오류 또는 입력 규칙을 안내하는 텍스트

4. 안내 텍스트 (Place Holder)
: 입력 필드가 비어 있을 때 필드의 용도에 대한 힌트를 제공하는 텍스트

그리고 그걸 직접 컴포넌트로 만들어보는 실습을 진행하였다!

5가지로 이름 입력 폼을 베리언트 했다.

이름형, 주민번호형, 버튼형으로 배리언트 하고, 보조 텍스트를 boolean 값으로 받아왔으며, 텍스트들은 입력할 수 있게 프로퍼티화 해주었다.

---

과제

파일 업로드 창 디자인

파일 업로드 창은 웹사이트와 앱에서 사용자로부터 파일을 제출받는 중요한 요소이다.

업로드 창을 단순하고 직관적으로 디자인하면 사용자가 혼란을 겪지 않고 끝까지 완료할 확률이 높아진다.
➡️ 한 번에 너무 많은 정보나 옵션을 요구하지 말고, 필요한 경우 단계별로 안내하거나 파일 형식과 크기 제한을 명확히 표시하는 것이 좋음.

또한, 업로드가 완료되었는지, 오류가 발생했는지에 대한 피드백을 실시간으로 제공하면 사용자가 안심하고 진행할 수 있다.

➡️ 시각적으로 깔끔하고 사용자 친화적인 파일 업로드 창은 웹사이트 신뢰도를 높이고, 사용자 경험을 향상시키는 데 큰 역할을 한다.

UI 요소 예시:

• 파일 선택 버튼 (Choose File / Browse): 사용자가 파일을 선택
• 드래그 앤 드롭 영역: 마우스로 파일을 끌어올 수 있는 공간
• 업로드 진행 표시 (Progress Bar): 파일 업로드 상태
• 파일 정보 표시 (File Name, Size): 업로드할 파일 정보를 확인
• 오류 메시지 (Error Message): 형식이 맞지 않거나 파일이 너무 큰 경우 안내
• 제출 버튼 (Submit / Upload): 파일 업로드를 완료

과정

1. 레퍼런스 수집

파일 업로드 창 디자인 레퍼런스를 먼저 찾고,
파일 업로드나 정보 표시, 오류 메세지 등의 레퍼런스도 추가로 찾아보았다.

2. 컴포넌트 제작

• 프로그레스 바(0/20/40/60/80/100%)
• 드래그 앤 드롭 영역(default/hover)
• 파일 정보 및 상태(uploading/hover/error/completed) 카드
• 버튼(default/force)
• close 버튼(default/hover)

더 탐구해야 할 점
여기서 프로그레스 바를 만들 때 퍼센테이지 글자대로 위드 값에 변수로 넣고 싶었는데... 피그마에 그런 기능이 있는지도 모르겠고 UI적으로 어떻게 표현하는지 몰라서 임의로 20씩 끊어서 만들어줬다!

3. 배치 및 예제 텍스트 입력

header(title,subtitle,icon)
body(upload, files)
footer(cancel and submit button)
레이아웃으로 분류하고 스마트 레이아웃화 해주었다.

가장 복잡한 컴포넌트인 파일 정보 카드 컴포넌트 프로퍼티이다.
현재 상태, 파일 이름, 파일 사이즈, 파일 종류 아이콘, close 버튼 프로퍼티를 네스티드 인스턴트로 가져왔다 !

4. 글래스모피즘 버전

또 내사랑 글래스모피즘 못잃기때문에.......... 바꾸어주었다 !!
다만 개선해야 할 부분은 error나 completed 상태에서 잘 보이지 않아서 디자인을 바꿔봐야 할 것 같고, 파일 갯수가 늘어났을 때 어떻게 처리할 건지? 고려하지 못했던 것 같다.

---

회고

멜 로빈스의 영상을 보면서, 스스로 삶을 바라보는 태도가 잘 잡혀나가고 있다고 느껴졌다. 무작정 긍정 파워~~ 보다 뇌과학적으로 근거가 있고, 또 최근들어 어떠한 이벤트나 사람을 대할 때 더 성숙해진 것 같은 기분이 들었다. 나를 이해하니 다른 사람도, 공부도 더 잘 이해가 된다 🥰

또 여러 디자인 개념에 대한 공부의 필요성을 느꼈다. 일관성, 시각적 계층 구조를 토대로 다양한 UI 요소들을 공부해야 한다. 오늘 배운 레이블, 입력 필드, 보조 텍스트 같은 가장 작은 요소들(Atoms)부터 나중에 이들을 조합해 만드는 로그인 화면이나 복잡한 템플릿까지 모두 개념적으로 숙지하고 있어야 디자인 하는데도, 소통하는데도 수월할 것이니까!

하나하나 요소를 만들고, 블럭 쌓듯이 위치 맞추어 조합해 나가는 과정이 재미있다 😝

#하나씩해나가는디자인과내삶