(DAY19) 앱 UI 디자인의 기본 원칙 이해하기 + 피그마 플러그인 추천

안녕하세요 :)

오늘은 다양한 피그마 플러그인에 대해 알아보고,

어제와 이어서 property를 활용한 실습 위주로 공부했습니다.

Nested instances 기능을 새롭게 배웠습니다. 어제 알았으면 좋았을 것 같네요🫢

 

 

 

 

---

 

 

✏️오늘의 학습

앱 UI 디자인의 기본 원칙 이해하기

실습 1) 수업내용 복습, 회원가입 form
실습 2) 파일 업로드 창을 디자인해보기

 

 

 

 

 

 

 

📖오늘의 핵심

여러분이 얼마나 열심히 노력하고 있는지를 인정해주고 알아줘야 한다. 하는 일이 눈에 보이지 않을 때도 있다. 그러니 나 자신을 비판하는 것을 멈추고, 지금 당장 자신에게 금상을 주어야 한다.

유즈케이스(Use case) 생각하며 디자인하기

 

 

 

 

 

 

 

 

 📝수업 내용 메모장

 

피그마 플러그인 추천

3Dicons
참고 위주로 하고, ai써서 뽑아내는게 더 퀄리티 높게 나온다고 함

 

conten treel : 더미텍스트 생성기, 타이틀, 이메일주소 등 다양함

 

designdoc : 디자이너가 값을 강조하거나, 설명할 때 주로 사용함. 폰트 뭐 썼고, 위드값, 컴포넌트세트 등도 표기 가능

autoflow : 와이어프레임 그리는 툴, 핸드드로잉 느낌

 

 

wireframe designer : 프롬프트 작성하면 와이어프레임 만들어줌

 

🌟tip : 현업에서는 마감시간이 있기 때문에 손이 느리면 융통성있게 플러그인 활용하기

fig map : map maker

 

 

---

1. 앱 UI 디자인의 기본 원칙 이해
1) 사용자 중심 디자인
디자인은 디자이너를 위한 것이 아니라, 사용자에게 의미가 있어야 한다.
사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는 게 핵심 !
기능보다 사용 경험을 우선하는 사고방식이 중요한데 실무에서는 잊게 되는 환경에서 살게 됨..

사용자중심 디자인 사례 : 에어비앤비

 

2) 시각적 계층 구조
사용자가 어디를 먼저 봐야 할지 자연스럽게 알 수 있어야 한다.
정보는 중요도에 따라 크기, 색상, 배치로 구분되어야 한다
강약조절이 되어야 사용자 흐름이 매끄럽게 흘러간다

시각적 계층구조 사례 : 유튜브
썸네일 이미지 강조 (가장 중요한 계층이기 때문)
영상 제목이 볼드체

 

3) 일관성
버튼 스타일, 폰트, 색상, 아이콘의 의미 등이 앱 전체에서 일관성있게 반복되어야 한다.
→ 그래서 디자인시스템을 만드는 것임.

 

 

 

2. 앱디자인 주요 화면 예시
온보딩 화면
앱을 처음 설치했을 때 사용자를 환영하고, 핵심 기능을  소개하는 화면
- 슬라이드 형식의 설명
- 로그인 또는 회원가입으로 이동 유도
- 비주얼 요소를 활용해 직관적으로 이해 가능하게 구성

온보딩 화면 잘된 예시 : 듀오링고

 

 

앱 화면의 주요 구성 요소
헤더, 메인 콘텐츠 영역, 푸터

 

 

디자인 프로세스 개요
1단계 - 사용자 요구분석
2단계 - 와이어프레임 작성
3단계 - UI 스타일 가이드 적용
4단계 - 프로토타입 제작

 

 

오늘 실습할 UI 용어

 

(UI 용어 공부 필요하다는 걸 느꼈다...ㅠ)
레이블 Lable
입력필드 Input
안내 텍스트 Place holder

보조 텍스트 Supporting text
→ 오늘 이 3개는 기억하기

 

 

텍스트 필드 실습하기

텍스트박스 만들어보기
피그마 tip : 보통 현업에서 왼쪽 패딩값은 4, 8, 12 위주로 썼음



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

사람들이 이 창을 통해 문서, 이미지, 동영상 등 다양한 파일을 업로드할 수 있습니다.

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

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

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

 

 

 

 

 

실습 1) 수업내용 복습하기  회원가입 form

 

 

Nested instances : 설정해논 모든 Properties 한 눈에 볼 수 있게 꺼내기

 

 

 

 

 

 

실습 2) 파일 업로드 창을 디자인해보기

※ 유즈케이스(Use case) 생각해보면서 공부하기

 

사진 업로드 플로우 화면 캡쳐

 

 

실제 서비스를 레퍼런스로 삼아서 공부하는 것이 중요하다고 하셔서, 드롭박스 앱을 설치해서 화면을 캡쳐해왔다. 다른 분들은 핀터레스트에서 레퍼런스를 찾으신 것 같은데, 실제 앱서비스에서는 핀터에서 본 다양한 유즈케이스(Use case)를 발견할수는 없어서 아쉬웠다.. 

 

사실 처음에 드롭박스의 사진업로드 플로우를 전부 클론해보려고 시도했다가, 나도모르게 또 그저 클론을 완벽히 해내야된다는 행동 안에 갇혀버렸다 ㅠㅜㅠㅜㅜ 그래서 2페이지 만들고 아차차 정신차린 다음에 다시 작업한게 마지막 사진이다. 😓

 

유즈케이스를 property 기능을 활용하여 만들어보고 느껴보는게 과제일텐데 자꾸 놓치게 된다 😭

 

이게 머리로는 알아도 몸이 습득하는데는 시간이 걸리는구나를 깨달은 날이다. 

머리로 안다고 정말 다 아는게 아니었다. 

---

 

💡 느낀점

 

기능을 익히는 것과, UXUI를 디자인하는 것은 별개다. 기능을 익힌다고 해서 디자인을 잘할 수 있는 것은 아니구나. 다양한 케이스를 많이 만들어보고, 디자인해봐야 실력이 느는 것이다. 클론도 중요하지만, 이제 클론보다 디자인실력을 늘릴 수 있는 방안을 탐색해봐야겠다.