dsgnmstr; Design Monster

[태그:] 화면설계

  • 디자인의 완성, 현실감을 불어넣다: UI 목업(Mockup)의 역할과 제작법 (정보처리기사 완벽 정리)

    디자인의 완성, 현실감을 불어넣다: UI 목업(Mockup)의 역할과 제작법 (정보처리기사 완벽 정리)

    ​우리는 지금까지 UI 설계의 여정을 함께하며, 뼈대를 세우는 ‘와이어프레임’과 움직임을 부여하는 ‘프로토타입’에 대해 알아보았습니다. 구조와 인터랙션이라는 두 가지 중요한 축을 세웠지만, 사용자에게 최종적으로 전달될 제품의 ‘첫인상’과 ‘감성’을 결정하는 핵심적인 조각이 아직 남아있습니다. 바로 제품의 얼굴이자 영혼인 ‘시각 디자인’입니다. 사용자가 앱을 열었을 때 느끼는 안정감, 브랜드가 전달하고자 하는 신뢰감, 그리고 사용 과정에서의 즐거움은 대부분 색상, 서체, 이미지와 같은 시각적 요소들로부터 비롯됩니다.

    ​이러한 최종적인 시각 디자인을 실제 제품과 거의 동일한 모습으로 구현하여 보여주는 정적인 결과물이 바로 ‘목업(Mockup)’입니다. 목업은 와이어프레임이라는 뼈대 위에 다채로운 색상과 질감의 옷을 입히고, 프로토타입으로 검증된 흐름에 현실감을 더하는 과정입니다. 이 글에서는 UI 설계의 화룡점정이라 할 수 있는 목업의 정확한 개념과 필요성, 핵심 구성 요소, 그리고 와이어프레임 및 프로토타입과의 명확한 차이점을 체계적으로 정리하여, 여러분이 아이디어를 온전한 시각적 실체로 완성하는 능력을 갖출 수 있도록 안내하겠습니다.

    ​목차

    1. ​목업이란 무엇인가?: 정적인 비주얼 완성본
    2. ​목업은 왜 필요한가?: 디자인의 설득력을 높이는 법
    3. ​목업의 핵심 구성 요소: 디테일이 완성도를 만든다
    4. ​와이어프레임, 프로토타입과의 최종 비교
    5. ​마무리: 현실감으로 설득하고 소통하라

    ​1. 목업이란 무엇인가?: 정적인 비주얼 완성본

    ​정적인 비주얼 완성본

    ​목업(Mockup)은 제품의 최종 화면이 어떻게 보일지를 시각적으로 보여주는 고충실도(High-fidelity)의 정적인(Static) 디자인 결과물입니다. 여기서 핵심은 ‘고충실도’와 ‘정적’이라는 두 가지 특성입니다.

    • ​고충실도(High-fidelity): 목업은 와이어프레임처럼 단순히 구조만 보여주는 것이 아니라, 실제 제품에 적용될 최종 색상, 서체, 아이콘, 이미지, 그래픽 요소들을 모두 포함합니다. 사용자가 최종적으로 경험하게 될 화면의 모습을 거의 100%에 가깝게 재현하여, 제품의 전체적인 톤앤매너와 시각적 완성도를 가늠할 수 있게 합니다.
    • ​정적(Static): 목업은 프로토타입처럼 클릭하거나 인터랙션할 수 없습니다. 말 그대로 실제 화면을 그대로 옮겨놓은 ‘이미지’ 또는 ‘그림’에 가깝습니다. 각 화면이 독립적으로 디자인되며, 화면 간의 연결이나 움직임은 보여주지 않습니다. 목업의 목적은 사용 흐름을 테스트하는 것이 아니라, 시각 디자인 그 자체를 평가하고 확정하는 데 있기 때문입니다.

    ​‘실제감’을 부여하는 역할

    ​목업을 비유하자면, 건축의 ‘투시도’나 ‘3D 렌더링 이미지’와 같습니다. 와이어프레임이 건물의 구조를 보여주는 평면 설계도이고, 프로토타입이 가상으로 건물을 둘러보는 VR 체험이라면, 목업은 완공 후의 모습을 실사처럼 정교하게 그려낸 사진과 같습니다. 이 사진을 통해 우리는 건물의 외벽 색상, 창문의 디자인, 조경의 모습 등을 구체적으로 확인하고 최종 결정을 내릴 수 있습니다. 이처럼 목업은 추상적인 설계 개념에 현실감을 불어넣어, 최종 결과물에 대한 구체적인 상을 공유하게 하는 역할을 수행합니다.

    ​2. 목업은 왜 필요한가?: 디자인의 설득력을 높이는 법

    ​목업은 단순히 예쁜 그림을 그리는 과정이 아니라, 프로젝트 성공을 위해 필수적인 전략적 역할을 수행합니다.

    ​시각적 디자인의 검토와 확정

    ​목업의 가장 주된 목적은 최종 시각 디자인에 대한 이해관계자들의 피드백을 받고 최종안을 확정하는 것입니다. 와이어프레임 단계에서는 구조에 대한 논의가 이루어졌다면, 목업 단계에서는 브랜드 정체성이 잘 반영되었는지, 선택된 색상과 서체가 사용자에게 편안함과 신뢰감을 주는지, 전체적인 디자인이 타겟 사용자의 미적 감각에 부합하는지 등을 집중적으로 검토합니다. 개발이 시작되기 전에 시각 디자인을 최종 확정함으로써, 개발 과정에서 발생할 수 있는 비싼 디자인 변경 비용을 사전에 방지할 수 있습니다.

    ​이해관계자와의 명확한 소통

    ​“백문이 불여일견”이라는 말처럼, 목업은 아이디어를 가장 직관적이고 설득력 있게 전달하는 도구입니다. 색상 팔레트나 스타일 가이드 문서를 보여주며 설명하는 것보다, 실제 화면처럼 보이는 목업 하나를 보여주는 것이 고객이나 경영진의 이해와 공감을 얻는 데 훨씬 효과적입니다. 목업을 통해 모두가 최종 결과물에 대한 동일한 시각적 기대를 갖게 되며, 이는 프로젝트 방향성에 대한 신뢰와 지지를 이끌어내는 데 중요한 역할을 합니다.

    ​개발자를 위한 시각적 가이드

    ​목업은 프론트엔드 개발자가 UI를 구현할 때 참고하는 가장 중요한 시각적 명세서가 됩니다. 개발자는 목업을 보고 각 요소의 정확한 색상 코드, 폰트 크기, 요소 간의 간격(픽셀 단위) 등을 확인하여 디자인을 코드로 완벽하게 구현할 수 있습니다. 제플린(Zeplin)이나 피그마(Figma)와 같은 현대적인 디자인 협업 도구들은 디자이너가 만든 목업에서 이러한 시각적 속성 값들을 개발자가 쉽게 추출할 수 있도록 지원하여, 디자인과 개발 간의 협업 효율을 극대화합니다.

    ​3. 목업의 핵심 구성 요소: 디테일이 완성도를 만든다

    ​와이어프레임이 목업으로 발전하기 위해서는 다음과 같은 구체적인 시각 디자인 요소들이 정의되고 적용되어야 합니다.

    ​색상 (Color Palette)

    ​단순한 흑백 회색조에서 벗어나, 브랜드의 정체성을 담은 주조색, 보조색, 강조색 등 최종 컬러 시스템이 적용됩니다. 긍정적 상태(성공, 확인)를 나타내는 녹색 계열, 부정적 상태(오류, 경고)를 나타내는 붉은색 계열 등 인터페이스의 상태를 알려주는 색상 규칙까지 모두 포함됩니다.

    ​타이포그래피 (Typography)

    ​‘Lorem Ipsum’과 같은 임시 텍스트가 실제 콘텐츠와 최종적으로 결정된 서체(Font family)로 대체됩니다. 제목, 부제목, 본문, 버튼 텍스트 등 정보의 위계질서를 명확하게 보여주기 위해 글자의 크기, 굵기(Weight), 자간, 행간 등이 정교하게 조절됩니다.

    ​아이코노그래피 및 이미지 (Iconography & Imagery)

    ​단순한 도형으로 표시되었던 아이콘들이 최종 디자인 스타일이 적용된 아이콘으로 변경되며, X자로 표시되었던 이미지 영역에는 실제 제품에 사용될 고화질의 이미지나 일러스트레이션이 삽입됩니다. 이는 제품의 전체적인 분위기와 완성도를 크게 좌우하는 요소입니다.

    ​간격과 그리드 (Spacing & Grid)

    ​요소들 사이의 여백(Margin)과 내부 여백(Padding)이 일관된 규칙에 따라 정교하게 조정됩니다. 보이지 않는 그리드 시스템을 기반으로 모든 요소를 정렬하여, 화면 전체에 시각적인 안정감과 질서를 부여합니다. 이러한 디테일이 쌓여 사용자에게 편안하고 전문적인 인상을 줍니다.

    ​4. 와이어프레임, 프로토타입과의 최종 비교

    ​이제 세 가지 핵심 산출물의 차이점을 목적, 충실도, 인터랙션 유무의 관점에서 최종적으로 정리해 보겠습니다.

    ​목적, 충실도, 상호작용의 차이

    • ​와이어프레임(Wireframe):
      • ​목적: 정보 구조와 기능 레이아웃 설계 (뼈대 잡기)
      • ​충실도: 낮음 (Low-Fidelity). 흑백, 회색조의 선과 도형 사용
      • ​상호작용: 없음 (정적)
    • ​목업(Mockup):
      • ​목적: 최종 시각 디자인과 스타일 확정 (옷 입히기)
      • ​충실도: 높음 (High-Fidelity). 최종 색상, 서체, 이미지 모두 포함
      • ​상호작용: 없음 (정적)
    • ​프로토타입(Prototype):
      • ​목적: 사용자 흐름과 인터랙션 검증 (움직여보기)
      • ​충실도: 낮음 ~ 높음 (Low to High-Fidelity). 와이어프레임 또는 목업 기반으로 제작
      • ​상호작용: 있음 (동적)

    ​프로세스상의 흐름을 보면, 보통 와이어프레임을 통해 구조를 잡고, 그 위에 시각 디자인을 입혀 목업을 완성합니다. 그리고 이 완성된 목업의 각 화면들을 연결하고 인터랙션을 부여하여 실제처럼 작동하는 고충실도 프로토타입을 만드는 것이 일반적인 순서입니다.

    ​5. 마무리: 현실감으로 설득하고 소통하라

    ​디자인 비전의 시각적 구현

    ​목업은 추상적인 아이디어와 구조적인 설계가 마침내 사용자의 눈을 사로잡는 구체적인 ‘얼굴’을 갖게 되는 결정적인 순간을 담아냅니다. 이것은 단순한 디자인 작업을 넘어, 우리가 만들고자 하는 제품의 비전과 가치를 시각 언어로 번역하여 팀과 이해관계자들을 설득하고 영감을 주는 과정입니다. 잘 만들어진 목업은 제품에 대한 기대감을 높이고, 프로젝트에 대한 모두의 열정과 확신을 하나로 모으는 강력한 구심점이 됩니다.

    ​적용 시 주의사항

    ​목업을 제작하고 활용할 때 몇 가지 점을 유의해야 합니다. 첫째, ‘이것은 실제가 아닌 정적인 이미지’라는 점을 명확히 소통해야 합니다. 특히 비전문가들은 실제 화면처럼 보이는 목업을 보고 클릭이 왜 안되는지 의아해할 수 있으므로, 목업의 목적이 시각적 검토에 있음을 사전에 설명하는 것이 중요합니다. 둘째, 구조에 대한 충분한 합의 없이 성급하게 목업 작업에 착수하는 것을 경계해야 합니다. 뼈대가 부실한 상태에서 외관만 화려하게 꾸미는 것은 사상누각과 같습니다. 마지막으로, 효율적인 작업을 위해 디자인 시스템(Design System)을 활용하는 것이 좋습니다. 반복적으로 사용되는 버튼, 입력창, 색상 등을 컴포넌트로 만들어 관리하면, 일관성을 유지하면서 빠르고 체계적으로 목업을 제작할 수 있습니다.

  • UI 설계의 뼈대를 세우다: 와이어프레임의 모든 것 (정보처리기사 핵심 요약)

    UI 설계의 뼈대를 세우다: 와이어프레임의 모든 것 (정보처리기사 핵심 요약)

    훌륭한 건축물을 지을 때, 화려한 벽지나 예쁜 가구를 먼저 고르는 사람은 없습니다. 가장 먼저 하는 일은 건물의 무게를 지탱하고 공간을 구획하는 뼈대, 즉 ‘설계도(Blueprint)’를 그리는 것입니다. UI/UX 디자인의 세계에서도 이와 똑같은 원리가 적용됩니다. 사용자가 최종적으로 마주할 아름다운 디자인과 부드러운 인터랙션을 구현하기 전에, 우리는 반드시 화면의 구조와 정보의 흐름을 정의하는 설계도를 먼저 그려야 합니다. 이 가장 근본적이고 필수적인 설계도가 바로 ‘와이어프레임(Wireframe)’입니다.

    와이어프레임은 색상, 폰트, 이미지와 같은 시각적 요소를 의도적으로 배제하고, 오직 정보의 배치, 기능의 우선순위, 그리고 사용자의 동선과 같은 핵심적인 구조에만 집중하는 화면의 청사진입니다. 이는 본격적인 디자인과 개발에 앞서 프로젝트의 방향성에 대한 합의를 이끌어내고, 잠재적인 구조적 문제를 가장 적은 비용으로 해결할 수 있게 해주는 안전장치입니다. 이 글에서는 정보처리기사 시험의 기본 개념이자 모든 UI 설계의 시작점인 와이어프레임의 정의와 중요성, 핵심 구성 요소, 그리고 다른 산출물과의 관계를 명확하게 정리하여 여러분의 기획 및 설계 역량을 한 단계 끌어올릴 것입니다.

    목차

    1. 와이어프레임이란 무엇인가?: 화면의 청사진
    2. 왜 와이어프레임이 필수적인가?: 비용과 시간 절약의 핵심
    3. 와이어프레임의 핵심 구성 요소: 뼈대를 이루는 것들
    4. 와이어프레임의 상세 수준 (Fidelity)
    5. 스토리보드, 프로토타입과의 관계
    6. 마무리: 구조가 우선이다

    1. 와이어프레임이란 무엇인가?: 화면의 청사진

    화면의 청사진

    와이어프레임(Wireframe)은 웹사이트나 애플리케이션의 각 화면이 어떤 정보와 기능 요소들로 구성될지, 그리고 그것들이 어떻게 배치될지를 보여주는 시각적인 설계도입니다. 이름에서 알 수 있듯이 ‘선(Wire)’으로 ‘뼈대(Frame)’를 잡는다는 의미를 가집니다. 가장 큰 특징은 디자인의 심미적 요소를 철저히 배제한다는 점입니다. 색상, 글꼴, 이미지, 그래픽 스타일 등은 모두 회색조(Grayscale)의 도형과 선, 그리고 기본 텍스트로만 표현됩니다.

    이렇게 시각적 요소를 제거하는 이유는 논의의 초점을 오직 ‘구조’에만 맞추기 위함입니다. 만약 초기 설계 단계부터 화려한 색상의 버튼을 보여준다면, 사람들은 “이 버튼의 색상이 마음에 들지 않아요”와 같이 구조와는 무관한 비본질적인 피드백을 하게 될 가능성이 높습니다. 와이어프레임은 이러한 불필요한 논쟁을 원천적으로 차단하고, “이 버튼이 정말 이 위치에 있는 것이 사용자가 목표를 달성하는 데 최선인가?” 혹은 “이 정보가 저 정보보다 더 중요한가?”와 같은 본질적인 질문에 집중하게 만듭니다.

    구조와 기능에 집중

    와이어프레임이 답하고자 하는 핵심 질문들은 다음과 같습니다.

    • 정보 설계(Information Architecture): 어떤 콘텐츠가 화면에 포함되어야 하는가? 각 정보의 우선순위는 어떻게 되며, 어떻게 그룹화해야 하는가?
    • 레이아웃(Layout): 각 정보 그룹과 기능 요소들은 화면의 어느 영역에 배치되어야 하는가?
    • 내비게이션(Navigation): 사용자는 어떻게 다른 화면으로 이동할 수 있는가? 메뉴와 버튼은 어떻게 구성되는가?
    • 핵심 기능(Core Functionality): 이 화면에서 사용자가 수행할 수 있는 핵심적인 기능은 무엇이며, 어떻게 표현되는가?

    결국 와이어프레임은 UI의 뼈대를 세우고, 그 위에 정보와 기능이라는 살을 붙이는 과정을 시각적으로 보여주는 첫 번째 단계라고 할 수 있습니다.

    2. 왜 와이어프레임이 필수적인가?: 비용과 시간 절약의 핵심

    조기 피드백과 쉬운 수정

    프로젝트 개발 과정에서 가장 값비싼 실수는 잘못된 방향으로 너무 멀리 나아가는 것입니다. 이미 개발이 완료된 기능의 구조를 변경하는 것은 엄청난 시간과 비용을 수반합니다. 와이어프레임은 본격적인 디자인과 개발이 시작되기 전에, 즉 수정 비용이 가장 저렴한 단계에서 화면의 구조와 흐름에 대한 피드백을 받을 수 있게 해줍니다.

    종이에 그린 스케치나 간단한 디지털 도구로 만든 와이어프레임은 몇 분, 몇 시간이면 수정할 수 있습니다. 이 단계에서 팀원이나 핵심 이해관계자들과 함께 리뷰하며 “우리가 사용자의 문제를 제대로 해결하고 있는가?”에 대한 합의를 이룰 수 있다면, 이후 단계에서 발생할 수 있는 막대한 재작업 비용을 예방할 수 있습니다. 이는 마치 건물을 다 지은 뒤에 벽을 허무는 것이 아니라, 설계도 단계에서 연필로 선을 지우고 다시 그리는 것과 같습니다.

    명확한 소통의 기반

    와이어프레임은 기획자, 디자이너, 개발자 간의 구체적이고 명확한 소통을 위한 공용 언어 역할을 합니다. 텍스트로만 가득한 기획서는 사람마다 다르게 해석될 여지가 많습니다. 하지만 시각적인 와이어프레임은 모두가 동일한 화면 구조를 보고 이야기하게 함으로써 오해의 소지를 줄여줍니다.

    디자이너는 와이어프레임을 통해 자신이 어떤 구조 위에서 시각 디자인 작업을 해야 하는지 명확한 가이드를 얻을 수 있습니다. 개발자는 화면에 어떤 기능 요소들이 포함되고, 대략적인 기술 구현의 복잡도가 어느 정도일지 미리 가늠해볼 수 있습니다. 이처럼 와이어프레임은 프로젝트의 다음 단계를 위한 견고한 토대를 마련하고, 팀 전체의 생산성을 높이는 데 결정적인 기여를 합니다.

    3. 와이어프레임의 핵심 구성 요소: 뼈대를 이루는 것들

    와이어프레임은 단순해 보이지만, 화면의 구조를 정의하기 위한 몇 가지 핵심적인 요소들로 이루어져 있습니다.

    레이아웃 구조 (Layout & Grid)

    화면 전체의 공간을 어떻게 분할하고 사용할 것인지를 정의합니다. 헤더(Header), 푸터(Footer), 사이드바(Sidebar), 콘텐츠 영역(Content Area) 등 주요 영역의 위치와 크기를 결정합니다. 일관성 있는 디자인을 위해 보이지 않는 격자 시스템(Grid System)을 기반으로 요소들을 배치하는 경우가 많습니다.

    콘텐츠 영역 (Content Placeholders)

    실제 텍스트나 이미지가 들어갈 위치를 표시하는 영역입니다. 이미지는 보통 X 표시가 된 사각형(Image Placeholder)으로 표현하며, 텍스트는 의미 없는 라틴어 문장(Lorem Ipsum)이나 간단한 선으로 표시하여 내용이 아닌 구조에 집중하게 합니다. 제목, 본문, 목록 등 텍스트의 위계는 글자의 크기나 굵기로 간략하게 구분할 수 있습니다.

    내비게이션 (Navigation)

    사용자가 사이트나 앱 내에서 길을 잃지 않고 원하는 정보로 이동할 수 있도록 돕는 시스템입니다. 상단 메뉴 바, 탭, 버튼, 링크, 드롭다운 메뉴 등이 포함되며, 와이어프레임에서는 이러한 내비게이션 요소들이 어디에 위치하고 어떻게 작동할 것인지를 명확하게 보여줍니다.

    기능 요소 (Functional Elements)

    사용자와 상호작용하는 모든 요소를 포함합니다. 검색창, 입력 폼(Form), 체크박스, 라디오 버튼, 슬라이더 등 사용자가 정보를 입력하거나 특정 기능을 실행하기 위한 컨트롤들을 배치하여 화면의 기능적 측면을 정의합니다.

    4. 와이어프레임의 상세 수준 (Fidelity)

    와이어프레임은 프로젝트의 단계와 목적에 따라 다양한 상세 수준(Fidelity)으로 작성될 수 있습니다.

    저충실도 와이어프레임 (Low-Fidelity Wireframe)

    가장 빠르고 간단하게 아이디어를 시각화하는 방법입니다. 종이와 펜으로 직접 그리는 스케치나, 화이트보드에 그리는 것이 대표적입니다. 정제되지 않았지만, 아이디어 회의나 브레인스토밍 단계에서 즉각적으로 생각을 구체화하고 팀원들과 소통하는 데 매우 효과적입니다. 수정이 자유롭기 때문에 다양한 레이아웃을 부담 없이 시도해볼 수 있다는 큰 장점이 있습니다.

    고충실도 와이어프레임 (High-Fidelity Wireframe)

    Balsamiq, Figma, Sketch와 같은 디지털 도구를 사용하여 좀 더 정교하게 작성한 와이어프레임입니다. 실제 화면과 유사한 비율과 간격으로 요소들을 배치하며, 클릭 가능한 링크를 추가하여 간단한 인터랙션을 구현하기도 합니다. 저충실도 와이어프레임보다 제작에 시간은 더 걸리지만, 개발팀이나 고객에게 전달할 공식적인 설계 문서로 활용하기에 적합하며, 더 구체적인 피드백을 얻는 데 유리합니다.

    5. 스토리보드, 프로토타입과의 관계

    와이어프레임은 종종 프로토타입이나 스토리보드와 혼동되기도 하지만, 목적과 역할에서 명확한 차이가 있습니다.

    • 와이어프레임 vs. 프로토타입: 와이어프레임이 ‘구조’에 대한 정적인 설계도라면, 프로토타입은 ‘인터랙션과 흐름’을 검증하기 위한 동적인 모델입니다. 사용자는 프로토타입을 직접 클릭하며 실제 제품처럼 사용해보는 경험을 할 수 있습니다. 와이어프레임을 기반으로 간단한 인터랙션을 연결한 것을 ‘와이어플로우(Wireflow)’ 또는 ‘저충실도 프로토타입’이라고 부르기도 합니다.
    • 와이어프레임 vs. 스토리보드: 와이어프레임이 구조의 ‘뼈대’라면, 스토리보드는 최종 시각 디자인과 상세한 기능 명세까지 포함한 ‘완성된 설계도’입니다. 와이어프레임 단계에서는 “여기에 로그인 버튼이 있다”까지만 정의한다면, 스토리보드에서는 “이 로그인 버튼은 파란색이며, 클릭했을 때 아이디가 비어있으면 ‘아이디를 입력해주세요’라는 붉은색 에러 메시지가 나타난다”와 같이 모든 시나리오와 정책을 상세하게 기술합니다. 즉, 와이어프레임은 스토리보드를 만들기 위한 선행 단계의 결과물입니다.

    6. 마무리: 구조가 우선이다

    구조적 문제 해결의 첫 단추

    와이어프레임은 화려하지는 않지만, 성공적인 UI를 만들기 위한 가장 단단한 주춧돌입니다. 탄탄한 구조 없이 쌓아 올린 디자인은 작은 변화에도 쉽게 무너질 수 있습니다. 와이어프레임은 디자인과 개발이라는 긴 여정을 떠나기 전, 우리가 가야 할 길의 지도를 그리고, 잠재적인 위험 요소를 미리 제거하는 가장 효율적이고 경제적인 방법입니다. 본질에 집중하는 이 단순한 뼈대를 통해, 우리는 더 나은 사용자 경험을 향한 첫걸음을 내디딜 수 있습니다.

    적용 시 주의사항

    와이어프레임 작업을 할 때는 몇 가지 원칙을 기억하는 것이 좋습니다. 첫째, ‘색상과 이미지에 대한 유혹을 이겨내야 합니다.’ 논의의 초점을 흐리는 시각적 요소는 의도적으로, 그리고 철저히 배제해야 합니다. 둘째, ‘완벽함보다 속도가 중요합니다.’ 특히 초기 단계에서는 빠르게 여러 대안을 그리고, 팀원들과 소통하며 더 나은 구조를 찾아 나가는 반복적인(Iterative) 과정이 핵심입니다. 셋째, ‘와이어프레임은 결과물이 아닌 소통의 도구’라는 점을 잊지 말아야 합니다. 혼자 완벽한 와이어프레임을 그리는 것보다, 조금 부족하더라도 팀원들과 함께 리뷰하고 발전시키는 과정이 훨씬 더 중요합니다.