UI 설계도에 해당하는 용어들
2009. 7. 17. 11:33ㆍUX 가벼운 이야기
User Interface Design은 매우 어린 학문이어서 자신의 주요 결과물을 무엇이라 부를 건가에 대해서조차 합의된 용어가 없습니다. 우리말로 하면 이른바 "UI 설계도"라고 할 수 있을까요? 하여간 업계에서 사용하는 용어를 모아보면,
1. UI 문서
GUI 문서에 대비되는 개념으로 UI를 설계한 문서라는 뜻인데, 웬지 정통성 없는 단어 같은 느낌이 듭니다.
2. 화면 설계서
제가 개인적으로 가장 선호하는 말은 '화면 설계서' 인데 다소 '흐름'에 대한 부분이 약한 느낌은 있지만 적어도 무엇을 이야기하는지는 어느 정도 설명하는 용어가 아닐까 생각합니다.
이것을 영어로 하면,
3. Wireframe
wire 즉 철사줄을 생각하시면 되겠죠. 철사줄로 만들어 놓은 조형물이 wire frame입니다. 이것이 3D 모델링에서는, 랜더링하기 전에 윤곽선만 잡아 놓은 것을 말하기도 합니다. 이 개념에서 차용해 온 것으로, 화면 설계에 있어서 구체적으로 면과 색을 칠하기 전의 상태, 즉 뼈대 혹은 윤곽선만 잡아 놓은 형태를 말합니다. 웹디자인에서 각 페이지의 영역 구분과 컴포넌트 배치, 콘텐트 배치 등을 해 놓은 문서를 말합니다. 우리 말로 하면 '윤곽선틀' 정도로 번역이 되겠네요. (미국 웹디자인 업계에서 주로 사용합니다)
4. Workflow
작업의 흐름을 말합니다. 우리 말로 하면 '작업 흐름도' 정도로 번역할 수 있겠습니다. 처음에 어떤 일을 하고, 그 다음에 어떤 일을 하느냐에서 아이디어를 착안하여, 디지털 제품 인터페이스가 처음에 어떤 일을 하고 다음에 어떤 일을 하는가를 설명해 놓은 문서입니다. 원래 이 용어는 생산 관리에서 나온 용어이겠죠, 식스 시그마나 TQM (Total Quality Management) 등이 이에 해당하는 용어입니다. (우리 회사에서 주로 사용하는 용어죠)
5. Storyboard
영화나 만화 제작할 때 어떤 식으로 이야기가 진행되는지 설명하기 위하여 스틸 컷과 함께 글로 설명을 해 놓은 문서를 말합니다. 우리말로 하면 '그림이야기' 정도라고 할까요? 여기에서 착안하여 디지털 제품 인터페이스가 처음에 어떻게 보이는지 그림과 글로 설명하고, 그 다음에 어떻게 보이는지 그림과 글로 설명한 것입니다. (학계에서 주로 사용하는 듯)
6. Flipbook
두꺼운 책 형태에 조금씩 다르게 그림을 그리고 빠르게 넘기면 마치 그림이 움직이는 것처럼 보이는, 어렸을 때 많이 장난치던 그것을 영어로 Flipbook이라고 부르는데, 거기에서 착안하여 빌려온 용어입니다. 인터페이스의 장면 장면을 매 페이지에 그리고 그 흐름을 볼 수 있다는 뜻에서 차용한 것이죠. (삼성전자 사람들이 주로 사용하는 듯)
7. MMI 문서, MMI 규격서
MMI는 Man-Machine Interface의 약자입니다. 예전에 세상의 대부분이 '기계'이던 시절. 인간과 기계간의 인터페이스가 매우 중요했겠죠. 이 때 (1950년대)는 '인간'이라하면 무조건 '남자'를 지칭하던 시절입니다. 따라서 기계 : 인간 인터페이스를 설명한 문서라는 뜻입니다. 이 개념은 GUI 문서와 대비되어 사용하는데, 즉 UI 설계 문서를 MMI 문서라고 하고, GUI Guideline 문서를 GUI 문서라고 하는 식입니다. (SKT, LG U+ 사람들도 많이 사용합니다. 또 산업공학 한 사람들도 많이 사용합니다)
8. Scenario, UI Scenario
영화에서 대사와 함께 지문으로 상황을 설명하는 문서를 말하죠. 사용자가 어떤 식으로 디지털 제품을 사용하는 상황이다라는 측면에서 UI 문서를 지칭할 때 사용합니다. (LG전자 사람들이 많이 사용하더만요) 시나리오라고 했을 때, 진짜로 시나리오처럼 글로만 상황을 설명하는 문서를 지칭할 때도 있지만, 대개 UI업계에서 시나리오라고 하면, 우리가 일반적으로 말하는 UI 문서처럼 화면 그림과 함께 설명이 들어가 있는 것을 말합니다.
9. Sketch
우리말로 하면 '흩그림' '밑그림' 이렇게 이야기하면 잘 전달 될까요? 디자인 된 것이 아니라, 디자인을 입히기 전의 상태라는 개념에서 이렇게 표현합니다. 사용 빈도는 낮습니다.
10. 콘티
Continuity의 약자로서 실제로 영미에서는 Conti라고 줄여서 말하지는 않는 것 같습니다만, 우리 나라에서는 공연 업계에서 주로 공연의 흐름이 어떻게 진행되는 지에 대하여 글과 그림으로 간단하게 설명하는 문서를 이렇게 지칭합니다. 영미권에서는 공연 뿐만 아니라 방송에서도 많이 사용하는 듯 합니다. 여기에서 착안하여 빌려온 용어로서 UI 흐름이 어떻게 되는지를 보여준다는 측면에서 이 용어를 사용합니다만, 사용 빈도는 낮습니다.
11. Interaction Framework
'Framework'이란 단어는 어떤 일에 있어서 기초가 되는 부분, 또 기초가 되어서 주로 반복하여 사용할 수 있는 부분을 말합니다. 예를 들어 건물을 세우거나 소프트웨어를 만들 때, 프레임웍을 잘 만들어 놓으면 다시 그 위에 쉽게 건물을 올리거나, 아니면 반복하여 다른 소프트웨어를 만들기 쉽죠.
여기에서 빌려와서, 앞에 Interaction을 붙인 용어입니다. 사람과 디지털 제품 사이의 상호작용에 있어서 큰 틀을 설명해 놓은 문서라는 관점에서 많이 사용합니다.
우리말로 하면 '상호 작용의 큰틀' 정도로 번역이 되겠네요.
12. Blueprint
우리말로 '청사진'이라고 말할 수 있는데, 건축업계에서 말하는 설계도라는 개념에서 차용하여 UI 문서를 지칭할 때 사용하는 사람들이 있습니다. 상대적으로 사용 빈도는 낮습니다. 최근 서비스 디자인쪽에서는 '서비스 블루프린트'라는 용어를 많이 쓰고 있습니다.
13. 기타
시방서, 스펙(Spec, specification), UI Guideline,draft, UI Requirement, UI 규격서
모두 다 다른 데서, 다른 측면에서, 빌려온 용어이긴 하지만, (11번과 12번을 제외하고는) 대부분 같은 결과 문서를 지칭하는데 사용합니다.
pxd에서는 '화면설계서'라는 말을 가장 많이 사용하고 그 다음에 'UI 문서','Workflow'라는 말을 사용하는 순으로 빈도가 되지 않을까 생각하는데, 다른 분들은 어떻게 생각하시는지요?
업계가 발전하려면 우선 용어부터 통일해야 한다는 생각이 간절하게 드네요. 적어도 우리 회사에서만이라도요.
(이 문서는 계속 수정하고 있습니다. 2012-07-27)
[참고##ux란##]
1. UI 문서
GUI 문서에 대비되는 개념으로 UI를 설계한 문서라는 뜻인데, 웬지 정통성 없는 단어 같은 느낌이 듭니다.
2. 화면 설계서
제가 개인적으로 가장 선호하는 말은 '화면 설계서' 인데 다소 '흐름'에 대한 부분이 약한 느낌은 있지만 적어도 무엇을 이야기하는지는 어느 정도 설명하는 용어가 아닐까 생각합니다.
이것을 영어로 하면,
3. Wireframe
wire 즉 철사줄을 생각하시면 되겠죠. 철사줄로 만들어 놓은 조형물이 wire frame입니다. 이것이 3D 모델링에서는, 랜더링하기 전에 윤곽선만 잡아 놓은 것을 말하기도 합니다. 이 개념에서 차용해 온 것으로, 화면 설계에 있어서 구체적으로 면과 색을 칠하기 전의 상태, 즉 뼈대 혹은 윤곽선만 잡아 놓은 형태를 말합니다. 웹디자인에서 각 페이지의 영역 구분과 컴포넌트 배치, 콘텐트 배치 등을 해 놓은 문서를 말합니다. 우리 말로 하면 '윤곽선틀' 정도로 번역이 되겠네요. (미국 웹디자인 업계에서 주로 사용합니다)
4. Workflow
작업의 흐름을 말합니다. 우리 말로 하면 '작업 흐름도' 정도로 번역할 수 있겠습니다. 처음에 어떤 일을 하고, 그 다음에 어떤 일을 하느냐에서 아이디어를 착안하여, 디지털 제품 인터페이스가 처음에 어떤 일을 하고 다음에 어떤 일을 하는가를 설명해 놓은 문서입니다. 원래 이 용어는 생산 관리에서 나온 용어이겠죠, 식스 시그마나 TQM (Total Quality Management) 등이 이에 해당하는 용어입니다. (우리 회사에서 주로 사용하는 용어죠)
5. Storyboard
영화나 만화 제작할 때 어떤 식으로 이야기가 진행되는지 설명하기 위하여 스틸 컷과 함께 글로 설명을 해 놓은 문서를 말합니다. 우리말로 하면 '그림이야기' 정도라고 할까요? 여기에서 착안하여 디지털 제품 인터페이스가 처음에 어떻게 보이는지 그림과 글로 설명하고, 그 다음에 어떻게 보이는지 그림과 글로 설명한 것입니다. (학계에서 주로 사용하는 듯)
6. Flipbook
두꺼운 책 형태에 조금씩 다르게 그림을 그리고 빠르게 넘기면 마치 그림이 움직이는 것처럼 보이는, 어렸을 때 많이 장난치던 그것을 영어로 Flipbook이라고 부르는데, 거기에서 착안하여 빌려온 용어입니다. 인터페이스의 장면 장면을 매 페이지에 그리고 그 흐름을 볼 수 있다는 뜻에서 차용한 것이죠. (삼성전자 사람들이 주로 사용하는 듯)
7. MMI 문서, MMI 규격서
MMI는 Man-Machine Interface의 약자입니다. 예전에 세상의 대부분이 '기계'이던 시절. 인간과 기계간의 인터페이스가 매우 중요했겠죠. 이 때 (1950년대)는 '인간'이라하면 무조건 '남자'를 지칭하던 시절입니다. 따라서 기계 : 인간 인터페이스를 설명한 문서라는 뜻입니다. 이 개념은 GUI 문서와 대비되어 사용하는데, 즉 UI 설계 문서를 MMI 문서라고 하고, GUI Guideline 문서를 GUI 문서라고 하는 식입니다. (SKT, LG U+ 사람들도 많이 사용합니다. 또 산업공학 한 사람들도 많이 사용합니다)
8. Scenario, UI Scenario
영화에서 대사와 함께 지문으로 상황을 설명하는 문서를 말하죠. 사용자가 어떤 식으로 디지털 제품을 사용하는 상황이다라는 측면에서 UI 문서를 지칭할 때 사용합니다. (LG전자 사람들이 많이 사용하더만요) 시나리오라고 했을 때, 진짜로 시나리오처럼 글로만 상황을 설명하는 문서를 지칭할 때도 있지만, 대개 UI업계에서 시나리오라고 하면, 우리가 일반적으로 말하는 UI 문서처럼 화면 그림과 함께 설명이 들어가 있는 것을 말합니다.
9. Sketch
우리말로 하면 '흩그림' '밑그림' 이렇게 이야기하면 잘 전달 될까요? 디자인 된 것이 아니라, 디자인을 입히기 전의 상태라는 개념에서 이렇게 표현합니다. 사용 빈도는 낮습니다.
10. 콘티
Continuity의 약자로서 실제로 영미에서는 Conti라고 줄여서 말하지는 않는 것 같습니다만, 우리 나라에서는 공연 업계에서 주로 공연의 흐름이 어떻게 진행되는 지에 대하여 글과 그림으로 간단하게 설명하는 문서를 이렇게 지칭합니다. 영미권에서는 공연 뿐만 아니라 방송에서도 많이 사용하는 듯 합니다. 여기에서 착안하여 빌려온 용어로서 UI 흐름이 어떻게 되는지를 보여준다는 측면에서 이 용어를 사용합니다만, 사용 빈도는 낮습니다.
11. Interaction Framework
'Framework'이란 단어는 어떤 일에 있어서 기초가 되는 부분, 또 기초가 되어서 주로 반복하여 사용할 수 있는 부분을 말합니다. 예를 들어 건물을 세우거나 소프트웨어를 만들 때, 프레임웍을 잘 만들어 놓으면 다시 그 위에 쉽게 건물을 올리거나, 아니면 반복하여 다른 소프트웨어를 만들기 쉽죠.
여기에서 빌려와서, 앞에 Interaction을 붙인 용어입니다. 사람과 디지털 제품 사이의 상호작용에 있어서 큰 틀을 설명해 놓은 문서라는 관점에서 많이 사용합니다.
우리말로 하면 '상호 작용의 큰틀' 정도로 번역이 되겠네요.
12. Blueprint
우리말로 '청사진'이라고 말할 수 있는데, 건축업계에서 말하는 설계도라는 개념에서 차용하여 UI 문서를 지칭할 때 사용하는 사람들이 있습니다. 상대적으로 사용 빈도는 낮습니다. 최근 서비스 디자인쪽에서는 '서비스 블루프린트'라는 용어를 많이 쓰고 있습니다.
13. 기타
시방서, 스펙(Spec, specification), UI Guideline,draft, UI Requirement, UI 규격서
모두 다 다른 데서, 다른 측면에서, 빌려온 용어이긴 하지만, (11번과 12번을 제외하고는) 대부분 같은 결과 문서를 지칭하는데 사용합니다.
pxd에서는 '화면설계서'라는 말을 가장 많이 사용하고 그 다음에 'UI 문서','Workflow'라는 말을 사용하는 순으로 빈도가 되지 않을까 생각하는데, 다른 분들은 어떻게 생각하시는지요?
업계가 발전하려면 우선 용어부터 통일해야 한다는 생각이 간절하게 드네요. 적어도 우리 회사에서만이라도요.
(이 문서는 계속 수정하고 있습니다. 2012-07-27)
[참고##ux란##]