목업 (mockup)
쉽게 풀면
실제로 작동하지는 않지만, 생긴 모습과 크기를 실물처럼 만들어서 눈으로 보고 손으로 만져볼 수 있게 만든 모형이에요.
왜 중요한가
목업은 제품의 최종 모습을 시각적으로 재현한 정적 모형으로, 디지털에서는 색과 서체와 이미지가 들어간 화면 시안을, 물리 제품에서는 실물 크기 외관 모형을 가리킵니다.
이해관계자가 최종 결과를 상상하지 않고 직접 보고 판단하게 하여 승인 과정을 빠르게 하며, 와이어프레임의 구조 위에 시각 디자인을 입힌 단계로서 개발 전 마지막 시각 기준이 됩니다.
디지털 목업은 화면 단위로 제작되어 클릭 가능한 핫스팟만 넣은 상태로 승인받는 경우가 많은데, 이는 실제 화면 전환 로직이 아니라 슬라이드 전환에 가깝다는 점에서 프로토타입과 다시 한 번 구분됩니다.
핵심 정리
목업(mockup)은 제품이나 화면이 완성되면 어떻게 보일지를 시각적으로 보여 주는 모형입니다. 디지털 인터페이스에서는 색, 글꼴, 이미지까지 반영한 정적인 화면 시안을, 제품 디자인에서는 실물 크기의 외형 모형을 가리킵니다.
시제품(프로토타입)이 무엇을 확인하려는지를 Houde와 Hill(1997)은 세 가지로 나눴습니다. 제품의 역할(사용자 삶에서의 기능), 느낌과 모습(look and feel), 구현(기술적 실현 가능성). 목업은 이 가운데 ‘모습’을 확인하는 데 맞춘 모형입니다. 또 Rettig(1994)는 정밀도에 따라 낮은 충실도와 높은 충실도 프로토타입을 구분했는데, 목업은 겉모습은 높고 동작은 낮은 쪽에 놓이는 일이 많습니다.
예시로 보기
가상의 앱 로그인 화면을 세 단계로 나눠 보면 목업의 자리가 보입니다.
| 단계 | 보여 주는 것 | 보여 주지 않는 것 |
|---|---|---|
| 와이어프레임 | 버튼·입력칸의 배치와 정보 구조(회색 선과 상자) | 색, 글꼴, 이미지 |
| 목업 | 색, 글꼴, 아이콘, 실제 문구가 들어간 완성 모습의 정적 화면 | 누르면 어떻게 되는지 |
| 프로토타입 | 화면을 누르면 다음 화면으로 넘어가는 동작 | 실제 서버·데이터 처리(구현) |
의사결정 회의에서 목업은 이해관계자가 ‘완성 모습’을 보고 반응하게 해 색이나 문구 같은 시각적 결정을 빨리 모읍니다.
자주 하는 오해
- “목업과 프로토타입은 같다.” 목업은 모습, 프로토타입은 동작을 확인하는 데 무게가 있습니다. 다만 도구가 화면 연결 기능을 제공해 클릭 가능한 목업이 흔해지면서 경계가 흐려졌습니다.
- “충실도가 높을수록 좋은 시안이다.” 초기에 너무 완성된 모습을 보여 주면 구조 논의 대신 색 취향 논쟁으로 흐르기 쉽습니다. 단계에 맞는 충실도를 고릅니다.
- “목업이 통과하면 사용성이 검증된 것이다.” 정적 화면은 보기 좋다는 것만 말해 줄 뿐, 쓰기 쉬운지는 사용성 테스트로 확인해야 합니다.
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
기능이 없는 형태 모형을 통해 물리적 크기와 조작 편의성을 오프라인에서 검토한 절차를 설명한다.
실제로 다 만들기 전에 모양만 본뜬 모형으로 미리 반응을 살펴보면 시간과 비용을 아낄 수 있다는 뜻이다.
조금 더 깊게 보면
목업은 작동하지 않는다는 점에서 프로토타입과 구별되며, 정적 화면만으로는 전환·상태 변화·오류 흐름을 평가할 수 없어 목업 승인이 곧 인터랙션 승인이라고 여기면 개발 단계에서 문제가 터집니다. 완성도 높은 목업은 고충실도의 함정(세부 피드백 편중, 고착)을 그대로 갖습니다.
물리 제품의 목업은 외관 모델이나 치수 목업처럼 목적별로 세분되고, 마케팅에서 제품 사진을 합성하는 '목업 템플릿'은 같은 단어의 다른 용법이므로 문맥 구분이 필요합니다. 물리 제품의 목업 제작에는 전통적으로 클레이나 우레탄폼이 쓰였고, 최근에는 3D 프린팅으로 대체되어 반복 수정 주기가 크게 짧아졌습니다.
목업 단계에서 소재의 질감과 무게까지 실물과 맞추면 사용자가 완제품으로 착각해 평가 결과가 왜곡될 수 있어, 평가 목적에 맞는 충실도 수준을 의도적으로 낮추기도 합니다.
마케팅 촬영용으로 제품 사진을 합성 배경에 얹는 '디지털 목업 템플릿'은 같은 단어를 쓰지만 검토용 물리 모형과는 전혀 다른 산출물이라 문맥으로 구분해야 합니다.
주의할 점
목업은 형태와 크기 검토에는 유용하지만 실제 작동 여부를 확인할 수 없으므로 기능적 검증에는 별도의 기능적 프로토타입이 필요하다.
헷갈리기 쉬운 용어
| 용어 | 핵심 | 충실도 |
|---|---|---|
| 와이어프레임 | 구조·배치 | 낮음(시각 스타일 없음) |
| 목업 | 완성된 시각 모습(정적) | 겉모습 높음 |
| 프로토타이핑 | 아이디어를 단순한 시제품으로 검증 | 목적에 따라 다름 |
| 외관모델 | 제품 겉모습을 실물처럼 만든 모형(산업디자인) | 겉모습 높음, 기능 없음 |
참고 문헌
- Rettig, M. (1994). Prototyping for tiny fingers. Communications of the ACM, 37(4).
- Houde, S., & Hill, C. (1997). What do prototypes prototype? In M. Helander, T. Landauer, & P. Prabhu (Eds.), Handbook of Human-Computer Interaction (2nd ed.). Elsevier.
- Buxton, B. (2007). Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.