[PM온보딩] 참고자료 7 : 디자인 산출물의 종류

Jun 30. 2025

디자인 산출물의 종류

다음 챕터로 넘어가기 전에, 디자인 산출물의 종류에 대해 간단히 짚고 가려고 합니다.

디자인 작업은 각 단계마다 다양한 산출물이 존재하며, 각 산출물은 고유한 목적과 기능을 갖고 있습니다. 더불어 산출물의 종류에 따라 선행되어야 할 작업이 달라지고, 이후 단계의 일정에도 직접적인 영향을 미치게 됩니다.
따라서 원활한 소통을 위해서는 각 산출물의 종류와 목적을 이해하고 있는 것이 중요합니다.

아래에 소개될 종류들은 일반화된 기준은 아니며, 제가 소속된 ‘똑똑한개발자’에서 다루고 있는 디자인 산출물들을 기준으로 정리하였습니다. 클라이언트에게 작업 범위를 안내하거나, 프로젝트 착수 시 참고용으로 제공하는 샘플로 활용되고 있으니 실무에서도 도움이 되실 거예요.

데스크 리서치

데스크 리서치(Desk Research)는 디자인 작업에 들어가기에 앞서 브랜드, 시장, 경쟁사, 타깃 사용자 등을 파악하기 위해 인터넷, 보고서, 기존 사례 등을 바탕으로 조사·분석하는 사전 리서치 단계를 말합니다.

디자인 방향을 수립하는 데 필요한 토대가 되며, 클라이언트의 목표 이해 및 요구사항 정리에도 도움이 됩니다.

아래는 클라이언트가 받게 될 데스크 리서치의 산출물 예시입니다.

위 샘플의 구성은 아래와 같습니다.

서비스의 정체성과 고객군을 정리합니다.

서비스의 현재 위치를 생애 주기로 표현하여 런칭 초기인지, 성장 중인지, 성숙기인지에 따라 디자인 방향성과 표현 방식이 달라질 수 있음을 나타냈습니다.

산업군 내 주요 트렌드를 파악합니다.

주요 경쟁사들과 우리 서비스의 디자인과 기능을 시각적으로 비교합니다.

우리 서비스의 경쟁 포지션을 표현합니다.

핵심 타깃 사용자층을 나이, 직무, 환경 등으로 구체화합니다.

서비스가 해결하고자 하는 시장 내 Pain Point를 명시합니다.

서비스가 해결하고자 하는 문제와 고객이 바라는 가치를 Company vs Customer 관점에서 정리합니다.

왜 데스크 리서치를 알아야 할까요?

디자인 컨셉은 '데이터'에서 시작됩니다.

기획 방향과 디자인 무드가 엇나가지 않도록 공통된 이해 기반을 만드는 것이 중요합니다.

데스크 리서치를 통해 설득력 있는 제안과 공감대 형성이 가능해집니다.

기획 문서(기능정의서, PRD 등)와도 연결되는 서비스의 출발점입니다.

브랜드 방향성

브랜드 방향성 (Brand Essence & Core Value)은 브랜드의 정체성을 설계하기 위한 초기 작업입니다. 단순히 로고나 컬러를 결정하는 것을 넘어, 우리 브랜드가 어떤 태도로 누구에게 다가갈 것인가를 정의하는 과정입니다.

브랜딩은 단순한 비주얼 작업이 아니라, 브랜드의 철학과 메시지를 내외부에 일관되게 전달하기 위한 전략적 작업입니다. 따라서 브랜드 키워드, 톤 앤 매너, 언어 스타일, 고객 접점에서의 행동 방식까지 폭넓게 다뤄지며, 일반적으로는 전담 브랜딩 디자이너나 브랜드 컨설턴트가 참여하는 전문 영역입니다.

그렇기에, 브랜딩은 상대적으로 시간과 비용이 많이 드는 작업입니다. 따라서 빠른 출시와 비용 절감을 우선하는 프로젝트에서는 이 과정을 생략하고, 디자인 컨셉 수립 후 곧바로 UX/UI 작업에 들어가는 경우가 많습니다.

브랜드는 사용자가 서비스를 처음 만나는 순간부터 기억되는 이미지이며, 이는 기능적 완성도 못지않게 사용자 경험에 큰 영향을 미칩니다.

아래는 클라이언트가 받게 될 브랜드 방향성의 산출물 예시입니다.

서비스 방향성

서비스 방향성 (Service Vision & Experience)은 제품이나 서비스를 통해 고객에게 전달하고자 하는 경험의 방향과 가치를 정의하는 작업입니다.

서비스 방향성은 왜 필요할까요?

무엇을 만들고 왜 만드는지, 그로 인해 어떤 경험을 줄 것인가를 정의할 필요가 있기 때문입니다. 서비스 방향성을 토대로, 해당 서비스만의 차별성을 확립할 수 있게 됩니다.

아래는 클라이언트가 받게 될 서비스 방향성의 산출물 예시입니다.

디자인 컨셉

디자인 컨셉은 본격적인 UX/UI 설계에 앞서, 브랜드의 시각적 방향성과 분위기를 정리한 핵심 산출물입니다. 이를 통해 디자이너와 클라이언트, 그리고 내부 팀원들 간의 시선 차이를 줄이고, 이후 모든 디자인 결과물에 일관된 톤 앤 매너를 부여할 수 있습니다.

디자인 컨셉 산출물을 통해 아래와 같은 요소들을 제안합니다.

1. Design Keyword

지향하는 핵심 가치를 단어로 표현합니다.

2. Design Motive

디자인을 시각적으로 풀어가는 모티브(동기)입니다. 해당 모티브를 기준으로 향후 UI 구조와 인터랙션 방식에 참고하여 설계하게 됩니다.

3. Color System

주요색(Primary), 보조색(Secondary), 그리고 각각의 상태값(Hover, Press 등)을 제안합니다. 컬러 시스템을 토대로 UI, 아이콘, 버튼, 그래프 등 시안에 일관되게 적용되며, 디자인 시스템 구축의 핵심이 됩니다.

4. Moodboard

비주얼 참고 사례를 통해 지향하는 스타일의 분위기를 전달합니다.

디자인 컨셉 산출물은 클라이언트에게는 브랜드 정체성에 대한 합의 자료가 되며, 디자이너에게는 작업 방향성을 잡아주는 기준이 됩니다.

아래는 클라이언트가 받게 될 디자인 컨셉의 산출물 예시입니다.

UI 시안

UI 시안 (UI Design)은 기능 설계와 사용자 경험(UX) 기획을 시각적으로 구현한 최종 결과물입니다.

클라이언트와 내부 팀 모두가 서비스의 실제 모습과 화면 흐름을 구체적으로 이해할 수 있도록 도와주는 핵심 산출물입니다.

UI 시안에는 다음과 같은 요소들이 포함됩니다:

사용자 여정(Flow) 기반의 화면 설계

기능 동작 흐름에 따른 인터페이스 구성

데스크톱/모바일 등 다양한 디바이스를 고려한 반응형 설계

실제 서비스에 구현될 버튼, 폰트, 컬러 등 시각 요소

프론트엔드 개발자는 해당 디자인을 바탕으로 화면 개발을 시작하게 되며, PM은 해당 디자인을 중심으로 QA, 콘텐츠 작성, 운영 전략 등 다음 단계의 업무를 설계하고 업데이트할 수 있습니다.

이 산출물을 통해 클라이언트는

서비스의 전체 구조, 인터랙션 흐름, 주요 기능의 배치와 우선순위를 시각적으로 확인할 수 있습니다.

디자인 컨셉과 기능이 제대로 반영되었는지를 검토할 수 있습니다.

PM은 디자인을 함께 검토하여 기능의 흐름들이 잘 이어지는지, 누락된 케이스는 없는지, 빠트린 기능은 없는지를 확인해야 합니다.

향후 개발 시 해당 디자인이 개발의 기준이 되기 때문에, 이 시점에서의 피드백 정리가 매우 중요합니다.

아래는 클라이언트가 받게 될 UI 시안의 산출물 예시입니다.

폰트 로고

폰트 로고 (Font-based Logo)는 브랜드 네임을 기반으로 디자인된 가장 단순하고 직관적인 형태의 로고입니다. 텍스트 중심으로 구성되어 있어 메시지 전달이 명확하며, 다양한 환경에서 유연하게 적용할 수 있는 실용성이 특징입니다.

아래는 클라이언트가 받게 될 폰트 로고의 산출물 예시입니다.

심볼 로고

심볼 로고 (Symbol Logo)는 브랜드의 정체성과 가치를 시각적으로 압축하여 표현한 그래픽입니다. 폰트 로고가 브랜드명을 직접적으로 드러내는 방식이라면, 심볼 로고는 브랜드의 철학, 방향성, 또는 상징적 요소를 하나의 도형이나 패턴으로 시각화합니다.

브랜드의 핵심 가치와 철학을 시각화한 해석이 함께 제공되어야 하기에 브랜딩 영역으로 볼 수 있습니다.

아래는 클라이언트가 받게 될 심볼 로고의 산출물 예시입니다.

로고 가이드

로고 가이드라인 (Logo Guideline)은 브랜드 로고의 일관된 활용을 보장하기 위한 표준 문서입니다.

브랜드의 심볼 로고 및 폰트 로고가 개발된 후, 다양한 환경에서 이를 정확하고 일관되게 활용할 수 있도록 가이드라인 형태로 정리한 문서입니다. 로고를 활용해야 할 때 일관성 있는 품질을 유지할 수 있도록 하는 기준이 됩니다.

해당 산출물 또한 브랜딩의 영역으로 시간과 비용이 발생합니다.

아래는 클라이언트가 받게 될 로고 가이드의 산출물 예시입니다.

모션 작업

모션 디자인 (Motion Design)은 브랜드 또는 서비스의 정체성을 '움직임'으로 전달하는 시각적 산출물입니다. 정적인 이미지나 UI 화면만으로는 담기 어려운 브랜드의 감성, 전달하고자 하는 메시지, 사용자와의 상호작용 흐름 등을 짧은 시간 안에 강렬하게 각인시킬 수 있습니다.

모션 작업은 별도 견적 항목인 경우가 많으며, 초기 요구사항 정리 단계에서 모션 여부, 활용 목적, 필요 분량 등을 미리 확인할 필요가 있습니다.

아래는 클라이언트가 받게 될 모션 작업의 산출물 예시입니다.

일러스트 작업

일러스트는 브랜드의 메시지를 감각적으로 전달하고, 텍스트와 UI로는 제한적인 감정 표현이나 컨셉 전달을 감성적이고 직관적인 방식으로 해석해 사용자에게 전달합니다. 정형화된 UI 컴포넌트로는 전달하기 어려운 브랜드의 톤 앤 매너를 시각적으로 표현할 수 있습니다. 단순 정보 전달을 넘어, 사용자의 몰입도와 재미 요소를 더합니다.

텍스트와 아이콘만으로는 부족한 안내/알림/성과 등의 요소를 일러스트로 보완하여 이해도와 집중력을 향상시킵니다.

일러스트는 요청 유형에 따라 리소스가 크게 달라질 수 있습니다.

아래는 클라이언트가 받게 될 일러스트 작업의 산출물 예시입니다.

컴포넌트 리스트, 디자인 시스템

디자인 가이드와 디자인 시스템을 구분할 줄 아는 것이 중요합니다.

디자인 가이드는 서비스의 시각적 일관성 전달을 위한 산출물이라면, 디자인 시스템은 실제 UI 제작을 위한 구현 기반 컴포넌트를 정리한 산출물입니다.

디자인 가이드는 로고 사용법, 색상/폰트, 여백/사이징 규정, 활용 예시 등을 포함한다면 디자인 시스템은 컴포넌트 단위(Button, Navigation 등), 상태별 UI 명세(Hover, Disabled 등), 크기/단말기 해상도별 텍스트 스타일, 피그마 기반의 실제 적용 가능 구조 등을 포함합니다.