DAY+19 [ UI디자인 실전앱 / 파일 업로드 실습 ]

안녕하세요, 주-주스 입니다! 🍹

 

☆.。.:*・°☆ ｡+.｡☆;｡+†_(′▽`*)β))
✺!~ 캠프 19일차  ~!✺

( •o• ) ﾍ( •̀ . •́ ﾍ) 와아앙

오늘은!! 

 UI디자인 실전앱 화면 디자인에 필요한 내용을 알아보고 직접 디자인 해본 내용을 포스팅하겠습니다!

 

---

!! 피그마 플러그인 추천 !!

플러그인 이름	주요 기능
Unsplash	고품질의 무료 이미지를 디자인에 바로 삽입할 수 있어요.
Iconify	수천 개의 아이콘을 피그마로 바로 불러와 사용할 수 있어요.
Material design icons	Google Material design 아이콘을 사용할 수 있는 플러그인이에요.
3Dicons	3D 아이콘을 제작하는 데 사용돼요.
Content Reel	더미 텍스트와 더미 데이터를 제공해요.
Lorem Ipsum	더미 텍스트를 제공해요.
Design Doc [Spectral]	디자인 작업에 대한 문서화(documentation)를 도와줘요.
Autoflow	두 개 이상의 프레임(화면, 컴포넌트) 사이에 자동으로 선(화살표)을 연결해줘요.
Wireframe designer	와이어프레임(wireframe)을 빠르고 쉽게 만드는 데 최적화된 도구예요.
Figmap - Map maker	지도 기반 디자인을 손쉽게 구현할 수 있도록 도와줘요.
html.to.design	실제 웹사이트의 HTML을 기반으로 피그마 디자인으로 자동 변환해줘요.

---

앱 디자인 핵심 원칙 ✨

1. 사용자 중심 디자인 (User-Centered Design) 🧑‍🤝‍🧑

• 핵심: 디자인은 디자이너를 위한 것이 아니라, 사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는 것이 중요.
• 사고방식: 기능적인 부분보다는 사용자가 경험하는 방식을 우선으로 생각해야 합니다.
• 사례: 에어비앤비

2. 시각적 계층 구조 (Visual Hierarchy) 👀

• 핵심: 사용자가 정보를 중요도에 따라 자연스럽게 인지하도록 만드는 것.
• 적용: 크기, 색상, 배치 등을 활용해 정보의 강약을 조절하면 사용자의 시선이 매끄럽게 흘러갑니다.
• 사례: 유튜브

3. 일관성 (Consistency) 🔁

• 핵심: 한 번 익힌 사용 방식이 앱의 모든 화면에서 동일하게 적용되도록 하는 것.
• 적용: 버튼 스타일, 폰트, 색상, 아이콘의 의미를 일관되게 유지하면 사용자는 더 빠르고 편하게 앱을 사용할 수 있습니다.
• 사례: 인스타그램

---

앱 디자인의 주요 화면 및 구성 요소 📱

1. 주요 화면 예시: 온보딩 화면 🚀

• 역할: 앱을 처음 사용하는 사용자에게 앱의 핵심 기능을 소개하고 환영하는 화면.
• 주요 특징:
  • 슬라이드 형식의 설명을 통해 앱의 주요 기능을 소개. ➡️
  • 로그인이나 회원가입으로 사용자의 다음 행동을 유도.
  • 일러스트나 아이콘 같은 시각적 요소를 활용해 직관적으로 이해할 수 있도록 구성됩니다.
• 분석 포인트: 메시지가 명확한지, 내용이 지나치게 길거나 복잡하지 않은지, 스킵(Skip) 기능이 있는지 등을 확인해야 합니다.
• 사례: 듀오링고, 넷플릭스, 테드

2. 주요 화면 구성 요소 🎨

• 헤더 (Header): 화면 상단에 위치하며, 화면의 제목이나 주요 내비게이션을 담고 있음. 🗺️
• 메인 콘텐츠 영역 (Main Content): 사용자가 가장 많이 상호작용하는 핵심 영역.
• 푸터 (Footer): 화면 하단에 위치하며, 하단 내비게이션이나 주요 버튼이 배치되는 경우가 많음.
• 사례: 네이버

---

디자인 프로세스 개요

 

1 단계: 사용자 요구 분석
2 단계: 와이어프레임 작성
3 단계: UI 스타일 가이드 적용

4 단계: 프로토타입 제작

단계		이 앱에서 실제로 하는 일
1. 사용자 요구 분석	"무엇이 불편해?"	• 밤마다 잠드는 시간이 들쑥날쑥해 피곤하다는 20대 직장인 8명 인터뷰 • 앱스토어에서 인기 '수면 관리' 앱 5개 기능 비교 • 정리 결과 → 취침 30분 전 알림 + 수면 점수 시각화가 가장 필요
2. 와이어프레임 작성	"연필로 뼈대 그리기"	• 홈 → 알림 세팅 → 수면 기록 보기 3-step 사용자 플로우 스케치 • Figma로 박스, 회색 톤만 사용해 빠르게 6개 화면 제작 • 팀 동료 3명이 클릭해 보며 "버튼 위치 헷갈려요" 피드백 받음
3. UI 스타일 가이드	"외형 통일하기"	• 인디고 + 라벤더 2색 팔레트, Noto Sans 서체 결정 • 둥근 카드, 그림자 2dp로 일관된 높이 설정 • 색 대비 체크 → 배경 #1A1A2E vs 글자 #FFFFFF (WCAG AA 통과)
4. 프로토타입 제작	"진짜처럼 눌러보기"	• 하이파이 화면에 슬라이드 전환, 프로그레스 애니메이션 추가 • 5명(목표 사용자)에게 TestFlight로 배포, SUS 설문 평균 78점 • "아침 리포트 화면 스크롤 길다" 지적 → 다시 Step 2로 돌아가 개선

 

 

---

오늘의 실습 !

⭐️ 수업시간에 학습한 부분, 다시 복습하여 제작 (property)

회원가입 form

---

⭐️ 파일 업로드 창을 디자인하세요 (과제2 설명)

• 파일 업로드 창은 웹사이트와 앱에서 사용자로부터 파일을 제출받는 중요한 요소입니다. 사람들이 이 창을 통해 문서, 이미지, 동영상 등 다양한 파일을 업로드할 수 있습니다.
• 업로드 창을 단순하고 직관적으로 디자인하면 사용자가 파일을 제출하는 과정에서 혼란을 겪지 않고 끝까지 완료할 확률이 높아집니다. 한 번에 너무 많은 정보나 옵션을 요구하지 말고, 필요한 경우 단계별로 안내하거나 파일 형식과 크기 제한을 명확히 표시하는 것이 좋습니다.
• 또한, 업로드가 완료되었는지, 오류가 발생했는지에 대한 피드백을 실시간으로 제공하면 사용자가 안심하고 진행할 수 있습니다. 시각적으로 깔끔하고 사용자 친화적인 파일 업로드 창은 웹사이트 신뢰도를 높이고, 사용자 경험을 향상시키는 데 큰 역할을 합니다.

UI 요소 예시:

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

 

---

[ 19일차 소감 😻]

피그마 커뮤니티도 참고해보고 흔히 쓰는 핀터레스트도 참고하며 열심히 작업했습니다. 간단하지만 중요한 부분이라고 생각하며 작업을 했는데 다 끝나고 보니 업로드 실패 화면이 없는 점을 확인하고 다음에는 더욱 집중하며 작성해야겠다고 다짐했습니다.. 그래도 하나의 과정 속에 많은 피그마 카드가 들어간다는 것을 깨달았고!! 여러 기능들을 사용하면 손쉽게 할 수 있다고 깨달았습니닷 ㅎㅎ 내일도 파이팅!!

 

= 오늘의 한 마디 =
- 내가 얼마나 열심히 노력하고 있는지에 대해 스스로에게 더 많은 인정해주기!