[UI/UX] 0. 들어가며

플러터를 이용한 모바일 개발을 하게 되면서 UI/UX의 중요성에 대한 인식이 부쩍 높아졌고, 직접 디자인을 하진 않더라도 최소한의 이해를 하고 있는게 좋을거 같다는 생각이 들었다. (물론, 어느 정도 공부하고 익숙해진다면 간단한 화면 정도는 직접 디자인 해볼 수도 있을 것이다.)

 

그러한 이유로, UI/UX 강의를 찾아보기 시작했다. 앞으로 가능한 매일, 이에 대해 공부하고, 이해한 내용들을 기반으로 기록해두고자 한다.

원래부터도 UI/UX가 무엇인가 라던가 어떠한 것이 더 좋은 UI/UX인가 정도는 알고 있었지만, 이번 공부를 통해 더 자세히 배우고 더 깊은 인사이트를 가져갈 수 있으면 좋겠다.

 

혹시라도 이 글을 읽게 되는 사람에게 당부의 말씀을 드리자면, 저는 이 분야 전문가가 전혀 아니며, 따라서 글의 내용에 틀린 내용이 있을 수 있고, 편하게 마음껏 지적해주시면 감사하겠습니다..

- UI/UX란?

UI: User Interface의 약자. 말그대로 사용자가 마주하게 되는(= 사용하게 되는) 조작부를 의미한다.

UX: User eXperiance의 약자. 좁게는 특정 UI, 넓게는 서비스 전체를 통해 얻게 되는 사용자의 경험을 의미한다.

 

단순히 "사용하기 위해" 필요한게 UI라면, "편안하고 좋은 인상을 남겨주기 위해" 필요한 것이 UX라고 할 수 있다.

둘은 서로 떼어놓고 이야기 할 수 없으며, 두 지식의 균형을 잘 이루어야 좋은 결과물을 낼 수 있다.

 

- 디자인 툴

다음은 디자이너가 알아두면 좋은 툴이라고 한다.

• UXUI 디자인용 - Figma (피그마), Sketch(스케치), Adobe XD (엑스디)
• 그래픽용 - Adobe Photoshop (포토샵), Adobe Illustrator (일러스트레이터) ((비트맵, 벡터 기반 그래픽(아이콘) 생성시 사용))
• Hi-Fi 프로토타입용 - ProtoPie (프로토파이)
• 핸드오프용 - Zeplin (제플린) ((요즘엔 피그마 스케치 엑스디 모두 기능 제공))
• 애니메이션용 - LottieFiles (로티파일즈)

 

- 웹 vs 앱

1. 접근성
   • 웹은 브라우저 URL만 있으면 되지만, 앱은 스토어에서 설치해야 함.
2. 업데이트 및 유지 보수
   • 웹은 수정후 서버에 적용하면 즉시 업데이트 되지만, 앱은 OS별 마켓 정책 기준으로 심사받아야 함.
3. 성능과 호환성
   • 웹은 단말기에 제한 없이 호환성이 뛰어나지만, 하드웨어 기능 사용 등에 있어서 성능적으로 앱보단 떨어짐.
   • 일부 앱은 네트워크가 연결되지 않아도 동작 가능함.
4. 검색(외부 노출) 용이
   • 웹은 SEO(Search Engine Optimization, 검색엔진 최적화)를 기준으로 검색 가능하지만, 앱은 직접 전용 홈페이지를 만들거나 광고를 통해 노출 시켜야 함.
5. 제작 방식
   • 웹은 다양한 디바이스 해상도에 맞춰 반응형으로 제작되고, 앱은 주요 OS 디바이스 해상도에 맞춰 제작됨.
6. 사용단위
   • 웹 - 반응형 단위 (px, em, vw, %)
   • 앱 - 상대적 단위 (dp, sp, pt)
7. 제작 공수
   • 웹은 더 적은 비용과 시간으로 개발이 가능하지만, 앱은 크로스플랫폼을 제외하면 OS마다 제작해야 함.
8. 개발 언어
   • 웹 - HTML, CSS, JS, Python, PHP, Java 등
   • 앱 - Swift, Obj-C, Java, Kotlin 등
9. 사용 단말기
   • 웹은 제한이 없지만(크로스 브라우징은 논외), 앱은 사용 단말기 OS에 따라 기능적 제한이 존재함.
10. 마케팅 운영
    • 웹은 유료 소프트웨어를 사용하지 않으면 개인화 마케팅이 어렵지만 앱은 쉬움(푸시 알림).

 

- Android vs iOS

각 OS에 대해 이해해야 하는 이유

프로젝트의 UI 디자인 단계에서 어떤 OS를 사용할지, 어떤 디바이스 해상도 규격에 맞출지에 대한 논의가 필요하고, 이때 OS 환경에 대한 이해가 필수적임.

프로젝트 규모, 기간, 개발 환경, 타깃 유저 등에 따라 디자인 방식이 달라질 수 있음. 이때 기준이 되는 OS를 선정해 작업을 하고 차이가 나는 부분은 별도로 체크해두고 제작해야 함.

차이점

	Android	iOS
서체	Roboto (https://fonts.google.com/specimen/Roboto?query=roboto)	San Francisco (https://developer.apple.com/fonts/)
단위	dp, sp	pt
최소 탭 크기	48 x 48 dp	44 x 44 pt
내장 네비게이션	O (뒤로가기 존재)	X (뒤로가기 없음)
메인 앱 네비게이션	상단 탭	하단 네비게이션 바
보조 앱 네비게이션	드로월 메뉴(=햄버거 메뉴)	하단 네비게이션 바 속 '더보기'
CTA (Call to Action: 행동 유도 버튼)	플로팅 액션 버튼	상단 네비게이션 바 우측
벡터 에셋	SVG	PDF

 

이외에도,

상단 네비게이션바 (의 뒤로가기, 타이틀, 액션버튼 배치, 아이콘 사용 여부),

검색바 (의 뒤로가기, 검색어, 검색어 삭제버튼 배치),

탭바 (의 모양),

액션 메뉴 (의 모양, 취소 버튼 유무),

등이 다름

 

- 앱 개발 과정

기획, 디자인, 개발, QA, 배포 + 운영의 순서로 진행됨.

1. 기획

"왜, 무엇을, 어떻게"

문제가 생겼을 때, 어떻게 해결할지를 고민하고 적절한 답안을 도출해내는 과정임.

2. 디자인

"어떻게 경험을 설계할 것인가"

원칙(브랜드 가이드라인, OS 가이드라인)에 맞춰 차별화된 유저 플로우(경험)를 설계하는 과정.

3. 개발

플랫폼 선정 후 개발을 진행하는 과정.

UX 향상을 위해 데이터 로깅을 하기도 함.

4. QA

기능을 테스트 하며 놓친 부분이 없는지 검증하는 과정.

5. 배포

스토어에 올리고 유저들의 피드백을 받아들이는 과정.