[UX] UX(User Experience) :: 개념, 목업 및 프로토타입 도구, 와이어프레임

UX(User Experience)

 

 

 

UX는 사용자 경험을 의미하며,

행위자의 관점에서 보다 효율적이고 편의를 제공하는 설계기법을 일컫는다.

 

아직 우리나라에선 UI(User Interface)와 혼용하여 취급하기도 한다.

그러나 따지고보면 UX와 UI는 서로 다른 개념이다.

 

UI는 디자인적 측면이 강하지만, UX는 이보다 상위 개념으로써 UI를 포함한다.

UX는 시각적 요소 외에도 사용자의 오감과 무의식적 경험 등을 반영하기 때문이다.

 

 

 

---

~ 광고 타임 ~

---

 

 

 

UX designer

 

 

- 예술분야에서 말하는 디자이너와, 공학에서 말하는 설계자 성격 모두를 가진다.

- 주로 사용자와 개발자 사이에서 중개자 역할을 수행한다.

- 논리적 사고와 감성적 사고의 균형이 요구된다. (공감능력)

- 남을 이해하고, 타인의 관점에서 생각할 줄 알아야한다.

 

 

 

 

목업 & 프로토타입 작성 도구

 

*목업(Mock up)이란?

: 제품을 만들기 앞서 제작하는 예상 모형을 말한다.

즉, 사전에 계획했던 제품이 되도록 방향을 제시해준다.

 

*프로토타입(Prototype)이란?

: 일종의 데모(Demo)다. 정식 출시전에 주요 기능 또는

요구사항 등을 반영한 테스트 버전이라고 생각하면 된다.

 

 

1) 악슈어(Axure)

- 스토리보드를 작성하기 용이한 도구로, 과거 맥OS만 지원했지만 이제 PC버전도 지원한다.

 

 

(이미지 캡쳐 : 악슈어 공식홈페이지)

 

- 라이선스 : 30일 체험판을 무료로 이용해볼 수 있다.

써보고 싶다면 홈페이지에서 이메일 주소를 제출하여 다운받아 써보자.

 

 

 

---

~ 광고 타임 ~

---

 

 

 

2) 옴니그래플(OmniGraffle)

- 다이어그램을 작성할 때 사용하는 도구로 맥OS와 iOS만 지원한다.

 

 

(이미지 캡쳐 : 옴니그래플 공식홈페이지)

 

- 라이센스 : 14일 체험판이며, 기본적으로 유료다.

맥 OS Standard 버전은 $99.99 / Pro 버전은 $199.99 (한화 약 11만 4천원/22만 7천원)

iOS Standard 버전은 $49.99 / Pro 버전은 $99.98 (한화 약 5만7천원/11만 4천원)

 

 

 

 

 

3) 비지오(Visio)

- MicroSoft사에서 만든 도구로, 다이어그램을 작성할 때 사용한다.

 

 

(이미지 캡쳐 : 비지오 공식홈페이지)

 

- 라이센스 : 체험판은 사무용으로만 제공되고 있다.

Visio Standard 버전이 약 41만 9천원, Professional 버전이 83만 9천원이며 부가세 미포함이다.

 

 

 

 

4) 발사믹 목업(Balsamiq Mockups)

- 프로토타입을 작성할 때 사용하는 도구다.

 

 

(이미지 캡쳐 : 발사믹목업 공식 홈페이지)

 

- 라이센스 : 체험판인 데모버전은 7일간 무료로 이용할 수 있다.

그 외 계속 사용하려면 $89(한화 약 10만 2천원)을 지불해야 한다.

 

 

 

 

5) 파워 목업(Power Mockup)

- PPT와 연동되는 프로토타입 작성 도구다.

 

 

(이미지 캡쳐 : 파워목업 공식 홈페이지)

 

- 라이센스 : 본래 유료 라이센스지만,

파워목업 관련 콘텐츠를 포스팅하면 무료로 전환할 수 있다고 한다.

유료 개인(Individual)버전은 $59(한화 약 6만 7천원)부터

기업용(Enterprise) $2,099.50(한화 약 240만원)까지 다양하다.

 

 

 

---

~ 광고 타임 ~

---

 

 

6) 프로토나우(ProtoNow)

 

(이미지 캡쳐 : 프로토나우 공식 홈페이지)

 

- 라이센스 : 드디어 무료 프로그램이 나타났다.

 

네이버에서 개발자 프로젝트로, 꾸준히 버전업 중인 목업 도구다.

즉, 국산이며 다운로드는 링크를 통해 최신버전을 받도록 하자.

 

 

 

 

7) 카카오 오븐(Kakao Oven)

 

네이버가 했으면 다음카카오도 한다.

아니면 다음카카오가 해서 네이버가 했거나..

 

(이미지 캡쳐 : 다음카카오 오븐 공식 홈페이지)

 

- 라이센스 : 초록이가 무료면 얘네도 무료다.

 

필자가 T아카데미에서 서비스 기획 강의를 들었던 때, 강사분이 가장 추천했던 도구였다.

 

 

 

+추신 : 설명없이 도구를 나열한 이유는 기능면에서 사실 다들 비슷하기 때문이다.

 

그러므로 직접 이것저것 써보고 자신에게 편리한 도구를 사용하길 권하고 싶다.

 

 

 

 

---

~ 광고 타임 ~

---

 

 

 

프로토타입 예제

 

다음은 필자가 발사믹목업 도구를 이용해 만들어본 예제들이다.

 

 

 

위와 같이 웹페이지부터 모바일 환경등 여러 요소를 드래그&드랍 형태로 쉽게 그려나갈 수 있다.

 

 

 

 

와이어 프레임(Wire frame)

 

만들고자 하는 대상의 형상을 와이어로 구축하는 것을 의미한다.

웹 사이트 차원에서는 여러 웹 페이지들의 이동 경로를 나타내는 것과 같다.

 

* 사이트맵(Site Map)은 포함관계와 계층적 구조를 제시하므로 와이어프레임과는 차이가 있다.

 

 

 

이건 필자가 UX를 공부하면서,

앞서 진행했던 졸업 작품을 간단하게 와이어프레임으로 일부분 그려본 것이다.

 

위에서 언급했던 목업파일들을 연결하면 와이어프레이이 되는 셈이다.

 

 

 

 

 

 

이것도 공모전 입상했던 앱 서비스 기획안을 와이어프레임으로 만들어본 이미지다.

 

사실 아직까진 별도의 룰이 정해진바 없다.

물론, 회사마다는 규칙이 존재하겠지만 적어도 공식화되진 않았으므로

저마다 보기 용이하게끔 정리하면 될 것 같다.

 

 

 

 

 

마치며

 

UX는 왜 필요할까?

 

필자는 사실 컴퓨터를 전공한 공학도이며,

개발자가 범하기 쉬운 오류 중 하나는 "개발자 중심적 사고"에 있다고 한다.

 

우리는 정보의 홍수속에서 불필요한 정보로 인해 시간을 잃고 있다.

 

 

따지고보면 이 블로그 또한 여러분의 눈을 붙들기 위해 노력중인 셈인데,

사용자 입장에서는 필요한 정보만 얻는 것이 중요하기에 불만이 될 수 있다.

 

이러한 갈등을 해소하기 위해 UX가 필요한 것이다.

 

 

 

---

~ 광고 타임 ~

---

 

 

(이미지 출처 : 구글 홈페이지 오드리햅번 탄생 85주년 로고)

 

구글 검색엔진이 야후를 누르고 세계 최고의 검색엔진으로 자리할 수 있던 것은,

기술력도 기술력이지만 철저하게 광고나 스폰서를 배제했기 때문이다.

 

즉, 정확한 정보를 우선 노출함으로써 신뢰를 얻었고 사용자 또한 늘릴 수 있었다.

 

다음 UX 시간에 다룰 주제를 아직 안정했으나,

왠만하면 접근법과 협업도구 또는 UX 적용 사례, 인터랙션 등에 대해 소개해 보겠다.

 

 

 

참고로 로고 이미지는 개인적으로 구글 로고 중 가장 맘에 들었던 로고라 그냥 올려봤다.

 

 

 

끝.