일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- javascript animation
- component
- Redux
- docker
- 웹팩
- route
- 성능최적화
- express
- typescript
- 포트포워딩
- 웹크롤링
- react
- 회고
- scrapping
- npx
- go
- Modal
- socket.io
- 정규표현식
- Recoil
- graphql
- CDN
- sequelize
- AWS
- 반응형웹
- styled-component
- cicd
- Today
- Total
프로그래밍 공부하기
UI/UX 차이 & UX 디자인 과정 본문
https://www.youtube.com/watch?v=fMunhPQPZA4 |
https://www.youtube.com/watch?v=GR375Na17hU |
나는 개발자가 개발만 하는 것이 전부는 아니라고 생각한다. 개발자는 팀의 일원으로서 공동의 목표(제품으로 수익창출)를 위해 다른 팀과도 의견을 나누고 협업해나가야 한다. 여러 사람이 협업을 하는 이유가 무엇일까? 분업이라는 측면도 중요하지만 의견을 나누면서 혼자서는 발견하지 못하는 새로운 아이디어를 발견하고 발전시킬 수 있기 때문이라 생각한다. 기능 요구사항에 대해 기능은 구현했지만 UX를 해치게 된다면 무슨 소용일까? 혹은 UX에 대한 이해를 바탕으로 구현이 불가능한 요구사항에 대해 UX를 해치지 않는 구현방법을 역제안할 수 있지 않을까? 어쨌든 제품을 만드는 일원으로서 제품을 다각도로 이해하는 역량이 의미가 있다고 생각하여 두 영상을 시청하게 되었다.
1. UI와 UX의 차이
- UX(User Exprience): 경험
- UI(User Interface): 경험을 실현시키는 수단
영상에서는 UX와 UI를 위와 같이 정의했다. 예를 들어 카카오톡 유저는 카카오톡을 사용함으로써 채팅이라는 경험을 하게된다. 카카오 회사에서는 카카오톡을 APP의 형태로 제공하고있다. 이 때 채팅은 UX고 채팅을 제공하는 수단인 APP이 UI가 된다.
카카오톡을 더 자세히 들여다보자. 채팅을 하기 위해서 친구 검색 > 친구 추가 > 친구와 대화 과정(UserFlow)을 거친다. 이 과정에서 UX 디자인은 각 단계에 대해 어떻게 가능하게 할 것인지. 친구 검색을 이름/카톡 ID/전화번호 등 어느 것으로 할 것인지를 결정하며, UI 디자인은 어떤 폰트/컬러/레이아웃으로 할지 결정한다.
이렇게 UI와 UX를 나누어 놓았지만 둘은 서로에게 영향을 주는 관계이다. UI를 결정할 때 '누구의 어떤 경험(UX)을 위해 디자인하는가' 가 고려되어야 한다. 반대로 UX는 UI와 같은 비주얼적인 요소가 유저 경험에 큰 영향을 준다. 5-60대를 위한 앱에 작은 글씨의 폰트를 사용하면 안 되는 것처럼 말이다.
2. UX 디자인 과정
- Empathize > Define > Ideate > Prototype> Test > Implement
UX는 product 기획과정과 동일하며 각 과정들이 계속 반복된다. UX 디자인 과정은 크게 4가지 영역으로 나눌 수 있다.
2-1. Reserch
Empathize / Define 과정은 제품 기획을 위한 리서치 과정이다. 타겟 유저를 결정하고, 이 유저들의 불편함/불만사항(Pain Point)이 무엇인지, 경쟁사는 누구인지, 우리의 차별점이 무엇인지를 결정한다. 즉, 우리의 제품이 어떤 문제에 집중해야 할 지를 결정하는 과정이다.
2-2. Ideation
Ideation은 어떤 기능을 구현할까. MVP(Minimum Viable Product)를 결정하는 과정이다. MVP란 가장 최소한의 기능을 갖춘 제품을 의미한다. 예를 들어 페이스북은 비전인 '사람들간의 연결'을 구현하기 위해 글 포스팅과, 포스팅된 글이 타인의 뉴스피드에 뜨는 것을 MVP라고 지정하였다. 다른 예로 자동차를 만든다고 생각해보자. 자동차를 만들 때 바퀴 하나 > 두 개 > 몸체 > 완성품을 만드는 것은 MVP를 지정한 것이 아니다. 자동차의 목적인 앞으로 가는 것이 마지막 완성품 외의 과정에서는 달성할 수 없기 때문이다. MVP로 자동차를 개발하는 것은 스케이트보드 > 자전거 > 오토바이 > 자동차 순으로 개발해나가는 것이다. 각 과정 모두 자동차의 목표인 앞으로 가는 것을 이루고 있다.
2-3. Prototyping
Prototype / Test에서 프로토타입이란 상품화에 앞서 성능을 검증ㆍ개선하기 위한 기본 모델을 의미한다. 이 때 UI/UX디자인이 시작된다. 프로토타이핑을 하는 이유는 제품을 시장에 내놓기 전에 미리 실패해보고 피드백을 통해 문제를 개선하기 위함이다.
2-4. Implement
Implement는 프로토타입의 완성도가 어느정도 도달되었을 때 진짜 제품 제작을 시작하는 것이다. 이 때부터 코딩을 시작한다!(내 생각에는 Ideation이나 Prototyping에서 이미 무엇을 구현해야할지가 어느정도 나와있기 때문에 일부 모듈은 해당 단계에서도 구현할 수 있지 않나는 생각도 든다. 또한 UIUX 중심으로 설명하기 때문에 위 프로토타이핑은 UIUX 프로토타이핑만을 의미하고, 코딩 단계에서는 개발 SW의 프로토타이핑에 대한 별개의 이론이 따로 있을 것이라고 생각된다.)
'감상문' 카테고리의 다른 글
Web vs WAS (0) | 2021.07.22 |
---|---|
HTTP/1.1, HTTP/2, QUIC (0) | 2021.06.19 |
Redis (0) | 2021.06.05 |
FE 인싸들이라면 알고 있어야 하는 프레임워크 기술들 (0) | 2021.05.28 |
JavaScript Bundle Diet (0) | 2021.05.23 |