1. 좋은 인터페이스/안 좋은 인터페이스
Bad/Good Interfaces : focus on the Vehicle Web sites
<정보디자인>
시각디자인전공
200766220 황선지

2. 목차
들어가며…
1. 현대
2. 기아
3. 쉐보레
4. 쌍용
5. 르노삼성
6. TOYOTA
7. HONDA
8. NISSAN
9. BMW
10. Mercedes-Benz
11. 결론
12. 좋은인터페이스란?
13. Thank you -<자료출처>

3. 들어가며…
요즘엔다들디자인잘한다. 정말잘한다. 디자인이잘되어있지않으면소비자들로부터외면받기쉬운세
상이다. 하지만우리는한번쯤생각해볼필요가있다. “예쁜디자인= 잘된디자인”이과연옳은등식
인지. 그런관점에서이번성찰일지를수행해보았다. 솔직히잘된인터페이스잘못된인터페이스규정
짓기에는문제가있어보인다. 내가느끼기에잘된인터페이스가다른사람이느끼기에잘못된인터페
이스가될수도있고, 그반대의경우도분명있을것이기때문이다.
분명우리는디자이너가되기위해공부하는사람들이고, 디자이너의전문적인시각으로물체나현상을바
라보았을때분명공통된시각과그에따른공통된의견들이있을것이다. 하지만그런부분에있어서도
분명히예외라는것도있을것이라는것이내추측이다. 그래서잘된인터페이스와잘못된인터페이스
를규정짓기에는다소무리가있어보인다는것이다.

4. 들어가며…
그래서본인은한가지상황을설정했다. 이접근방법이잘된인터페이스와잘못된인터페이스를구별하
고규정짓는데맞는방법인지는잘모르겠지만, 앞서얘기한대로요즘디자인은너무나잘되어있고, 그
중에서도사용자를고려한디자인은말할것도없다.
1. 자동차구입을하려는30대직장인. 하지만자동차에대해서는잘모른다.
2. 컴퓨터와모바일기기를이용한인터넷검색등을통해정보를수집하고정보를찾기를즐긴다.
3. 자동차구입을위해자동차회사들을탐색한다.
이렇게한회사원이자동차를구입하기위해서여기저기자동차회사들의웹사이트들을탐색하면서느낀
점들을바탕으로잘된인터페이스와잘못된인터페이스에대해서규정을지어볼까한다.
<작성방식>
• 웹페이지로딩후최초로보이는모습(메인페이지)을기준으로작성
• 국내외완성차업체들을위주로작성
>> 1. 현대2. 기아3. 쉐보레4. 쌍용5. 르노삼성6. 토요타7. 혼다8. 닛산9. BMW 10. Mercedes-Benz
• (특별한선정기준은없을뿐더러특별한순서배정도없음을밝히는바이다.)

5. 1. 현대
자동차의라인업별로구분지어놓았다.(카테고리의분류) : 모든분류에서부
터승용, 상용차까지다양하게분류해놓아서각기다른용도에따른니즈를갖
고있을구매자의입장에따라쉽게알아볼수있게분류해놓아편리하다.

6. 1. 현대
마우스커서를카테고리위에가져가면각라인업에맞는차량이표기되는데여기서주목할점은차량
명과차량의생김새가함께표현된다는점이다.(다른자동차업체들홈피와비교해볼부분)
그리고각라인업을총체적으로보여주는„ALL‟이란카테고리에서이회사가판매하는차량의종류와회
사의특색을알수있다.

7. 1. 현대
차량의특성별로카테고리가나눠져있고, 그중“승용”이란카테고리를골랐
을때의화면.

8. 1. 현대
“승용” 카테고리내에서특정차량을골랐을때의내용. 마우스커서를원하는
차량의이미지위에올리면대략적인설명이나오고, 이미지를클릭할경우

9. 1. 현대
차량에대한상세설명이나와소비자들이알고싶어하는정보를제공하고있다. 이런
일련의과정에있어서소비자들로하여금편의성이나정보전달의명확성에서혼란
이나모호함을주지않는좋은인터페이스의한예로봐도될것같다.

10. 2. 기아
기아자동차의웹페이지메인화면. 기아자동차도현대자동차와마찬가지로자동차
의구분방법별로구별을지어놓고카테고리화해서정리해놓았다. 소비자가쉽게알
아볼수있는구분방법이다.
그리고전체적으로메뉴바와메뉴바아래의디스플레이공간을형성하는부분이기
아자동차의호랑이라디에이터그릴을형상화하고있어서전체적으로통일감을주
고있다. (그냥전체모습이라디에이터그릴이다!!!)

11. 2. 기아
현대자동차홈페이지와비교해다른점이있다면모든자동차를아우르는
“ALL”이란카테고리가없다는점. 하지만있어도그만없어도그만알아보는데
는크게어려울것이없어보인다. 오히려없는게더시원시원해보인다.

12. 2. 기아
마우스커서를특정자동차위에위치시켰을때선택한자동차의이미지외에는오페
서티(opacity)값이주어지면서선택한차량에만집중할수있다. 이는사용자의오해를
줄일수있는요지로, 선택한차량에대한집중도를높일수있는좋은요소가아닌가
싶다.

13. 2. 기아
처음화면에서찾았던호랑이라디에이터그릴은개별자동차상세설명페이지에서
도이어짐으로써통일감을주고있다. 아주멋지고좋은인터페이스의예라고해도
될듯. (상세내용확인을위해다른페이지로넘어왔음에도불구하고한페이지내에
서이뤄졌다는착각마저들정도다.)

14. 3. 쉐보레
쉐보레자동차의메인화면. 전체적으로무난한인터페이스다.

15. 3. 쉐보레
차량의분류에대한기준은업체마다다르니패스!

16. 3. 쉐보레
특이한점은분류기준에의해나눈카테고리에서나타난다. 앞서본현대,기아자동차의웹사
이트와는달리카테고리분류상에서각자동차의최소가격을명시해놓는다. 아무래도소비
자입장에서는가격이최고의관심요소일것이다라는생각을바탕에둔결과가아닌가싶다.
가격이최우선인소비자입장에서는완전땡큐!!!

17. 3. 쉐보레
전체적인인터페이스는무난하다. 하지만디자인적으로는뭔가부족하지않
나싶다. 자동차회사라면갖춰야할역동성이나그회사만의특색이있어야할
것같은데뭔가부족한느낌을지울수없는쉐보레의홈페이지다.

18. 4. 쌍용
일단쌍용자동차회사자체가라인업이그리많지는않다. 그래서그런지매우
간결한인터페이스의홈페이지다.

19. 4. 쌍용
전체적으로무난한인터페이스의홈페이지다.

20. 4. 쌍용
전체적으로무난한인터페이스의홈페이지다.

21. 5. 르노삼성
르노삼성자동차의홈페이지메인의모습이다.르노삼성자동차도쌍용자동차만큼이나라인업이부실(?)한회사이
다.하지만홈페이지에서는르노삼성쪽이더공들인듯한느낌이다.먼저메인화면에서움직이는자동차가등장하며
사용자의이목을집중시킨다.자동차회사본연의느낌을충실히표현한메인화면이다.보는사람으로하여금“오~!”
하는느낌을준다(적어도본인은그렇게느꼈다.).자동차가주는동적인이미지를가장잘표현한자동차홈페이지가
아닌가싶다.

22. 5. 르노삼성
전체적으로자동차의동적인이미지를많이강조한홈페이지다. 르노삼성자
동차구입에관심이없는사람일지라도웹페이지에등장하는움직이는자동
차를통해 관심을가질만하지않을까? 생각해본다.

23. 6. TOYOTA
일본특유의정갈함과깔끔함을느낄수있는토요타자동차웹사이트의인터
페이스이다.

24. 6. TOYOTA
쇼룸카테고리내에서토요타자동차의모델들을확인가능하다. 여기서는차
량모델명만확인가능하다. 딱히라인업이라는게없다. 직접클릭해확인해
보지않고서는알수없다.

25. 6. TOYOTA
그렇게아무차량이나클릭해봤더니새로운패널이생겼다. 각차량별이름과
이미지들. 처음화면에서확인할수없었던내용들이클릭해들어와서확인해
보니알수있게되는형식의홈페이지다.

26. 6. TOYOTA
시원시원하게들어간클릭요소들이그나마인터페이스에있어서사용성을증
가시킨다.

27. 7. HONDA
찾아본자동차홈페이지중최악이었다. 큰이미지아래에3가지의동영상이
정신없이돌아간다. 인트로부분에서신차에대한팝업이뜨는데, 이런팝업
이뜨면그팝업에집중할수있어야하는데그렇게하지못한다.

28. 8. NISSAN
여느자동차회사의홈페이지와비슷한포멧을가져가고있다. 무난해보인다.

29. 8. NISSAN
차량명을선택하려고마우스커서를올려놓자차량의이미지가옆에뜬다. 굳
이이렇게한이유를모르겠다. 이용자의편의를생각한다면그냥차량이미지
와차랑명을같이표기하는게더좋은방법이아닐까생각해본다.

30. 9. BMW
외국회사라서그런지외국느낌이많이든다. 무난하다.

31. 9. BMW
라인업에따른카테고리별정렬에서주목할점은그냥문자로만표현되었다
는점.

32. 9. BMW
그렇게선택한카테고리내에서는다행히도차량에대한이미지가나와있다.하지만문제는여기서도계속된다.보
통다른홈페이지들에서는차량의이미지위에마우스커서를갖다대면선택되었다는느낌과함께클릭할수있는
요소가있었다.하지만BMW홈페이지에서는그런요소는찾아볼수없다.차량의이미지밑에나와있는내용들(텍스
트)을일일이클릭해서내용에대해서알아봐야하는불편함이있다.

33. 9. BMW
그래서BMW의본사홈페이지를찾아봤다.한국BMW홈페이지와는다르게라인업별로차량의이미지가나와있어
서소비자가구별하기편하고,이미지위에마우스커서를올리면클릭할수있게되어있다.
한국BMW홈페이지는어떤회사내의규정이있는지는모르겠지만본사홈페이지의포멧을„그냥‟가져왔다고밖에
생각되지않는다.

34. 10. Mercedes-Benz
BMW와비교해서(비교안하려고해도비교될수밖에없다)사용자의편의적인면에서는뛰
어나다고평가할수있겠다. 단지아쉬운점은한국사람들을위한Benz한국홈페이지임에도
불구하고한글보다영어가많다는점. 현지화과정이조금더필요해보인다.

35. 10. Mercedes-Benz
특히사용자를고려해서각라인업별로정렬해놓고이해를돕기위해마우스
커서를라인에해당하는알파벳위에올리면이미지가함께뜬다.

36. 10. Mercedes-Benz
여기서주목할점은특정라인업에서는자동차의형태바디(body)를선택할수
있는옵션이주어지는데선택한바디옵션에따라시뮬레이션해볼수있다.

37. 결론
앞선내용들을토대로좋은인터페이스가되기위한조건을살펴보면…
1. 사용하기 쉬워야 한다.
2. 사용자가 예상한대로 실행 되야 한다.
3. 일관적이어야 한다.
정도가되지않을까?!!
그리고좋은인터페이스의조건에대한정보를찾던중좋은내용들이있어서공유해볼까한다.
좋은인터페이스, 나쁜인터페이스:http://blog.aladin.co.kr/ziririt/4107
What makes a good user interface? : http://uw714doc.sco.com/en/SDK_vtcl/vtclgN.style_goodui.html
Good User Interface Design Tips: http://toastytech.com/guis/uirant.html

38. 결론
굳이 좋은 인터페이스와 안 좋은 인터페이스를 나누라면…
좋은인터페이스
안좋은인터페이스

39. 결론
상위권
좋은인터페이스
안좋은인터페이스
X축: 좋은/안좋은인터페이스
Y축: 세계자동차순위
하위권

40. 결론
세계 상위권의자동차 회사라고 웹 페이지를잘 만드는 건 아니며,
세계하위권의 자동차회사라고웹 페이지를잘 못 만드는 것도 아니다!

41. 좋은 인터페이스란…?
사용하기
[ 쉬운것 ]

42. Thank you :)
<자료출처>
• 현대자동차: http://www.hyundai.com/kr/main.aspx
• 기아자동차: http://www.kia.co.kr/default.aspx
• 쉐보레자동차: http://www.chevrolet.co.kr/kor/index.do
• 쌍용자동차: http://www.smotor.com/kr/index.html
• 르노삼성자동차: http://www.renaultsamsungm.com/main.jsp
• Toyota: http://www.toyota.co.kr/index.asp
• Honda: http://www.hondakorea.co.kr/
• Nissan: http://www.nissan.co.kr/
• BMW : http://www.bmw.co.kr/kr/ko/
• Mercedes-Benz : http://www.mercedes-benz.co.kr/content/korea/mpc/mpc_korea_website/krng/home_mpc/passengercars.flash.skipintro.html
• 자동차회사순위: http://blog.naver.com/eccentric679?Redirect=Log&logNo=100157061657