제품 디자이너: PM과 PD의 차이점과 의사소통의 중요성
제품 디자인의 세계에서, 다양한 역할이 중요한 기능을 수행한다. 이 중 특히 Product Manager(PM)와 Product Designer(PD)의 역할은 제품 개발의 핵심을 이룬다. 두 직책은 서로 다른 책임과 기능을 가지고 있지만, 뛰어난 커뮤니케이션 능력은 모두에게 필수적이다.
PM과 PD의 차이점
- PM (Product Manager): 상품 전략을 세우고 관리하는 역할을 한다. 시장 조사부터 제품 기획, 출시 전략 수립에 이르기까지, 제품의 성공을 위한 전략적 결정을 내리는 것이 중요하다.
- PD (Product Designer): 사용자 경험 설계 및 디지털 제품의 비주얼 디자인을 담당한다. 사용자의 요구를 이해하고, 이를 기반으로 효과적이고 매력적인 디자인을 창출하는 것이 주요한 역할이다.
PM과 PD의 공통점
- 두 직책 모두 커뮤니케이션 스킬이 뛰어나야 한다. 의사소통 능력은 프로젝트의 성공에 있어 매우 중요하며, 팀 내외부와의 원활한 의사소통을 통해 프로젝트의 목표를 달성하는 데 기여한다.
프로덕트 디자이너가 의사소통을 잘하기 위한 요소들
- Product Orientation (제품의 방향): 제품의 방향과 목표를 명확히 이해하고, 이를 팀원들과 공유한다.
- Holistic Experience Design (총체적인 사용자 경험 디자인): 사용자의 전체적인 경험을 고려하여 디자인한다. 이는 단순히 제품의 외관뿐만 아니라 사용자의 경험 전반에 걸친 고려를 포함한다.
- Prototyping (제작 방법): 아이디어를 실제로 구현하는 과정에서의 커뮤니케이션은 중요하다. 프로토타입을 통해 아이디어를 시각화하고, 팀원들과 의견을 나누는 것은 프로젝트의 진전에 기여한다.
- User Testing (사용자 테스트): 사용자의 피드백을 수집하고 이해하는 과정에서의 의사소통은 제품 개선에 필수적이다. 사용자의 의견을 정확히 파악하고 이를 제품 개선에 반영하는 것이 중요하다.
- Interaction and Visual Design (상호작용 디자인과 시각 디자인): 디자인 요소들이 사용자와 어떻게 상호작용하는지를 이해하고, 이를 통해 사용자 경험을 개선하는 것이 핵심이다. 시각적 요소와 상호작용 디자인은 사용자의 만족도에 직접적인 영향을 미친다.
제품 개발 프로세스: 제품이 만들어지는 다양한 접근법
제품 개발은 다양한 방법론을 통해 진행될 수 있다. 이러한 방법론들은 각각의 장단점을 가지고 있으며, 프로젝트의 성격과 요구에 따라 선택된다.
Waterfall 방식
이 방식은 전통적인 접근법으로, 기획 단계에 정해진 계획이 최종 단계까지 변경 없이 진행된다. 이는 예측 가능하고 체계적이지만, 유연성이 부족한 점이 단점이다.
Agile 및 Lean
Agile과 Lean은 최소한의 스펙으로 시작하여 빠르게 시장에 제품을 출시하고, 사용자의 반응을 바탕으로 기능을 수정해 나가는 방법론이다. 이는 빠른 반응과 지속적인 개선을 가능하게 한다.
5D 프로세스
5D는 아이디어 도출, 디자인, 유통, 사용자 피드백을 통한 개선의 순환 과정을 포함한다. 이는 사용자 중심의 접근법으로, 시장의 변화에 빠르게 대응할 수 있다.
Agile Process
Agile 방법론은 사용자 우선, 개인과 상호작용 중시, 작동하는 소프트웨어에 중점을 둔다. 이는 계획보다는 변화에 대응하는 데 중점을 둔다. 이 접근법은 완벽한 설계보다는 점진적 개선을 지향한다.
Agile과 Waterfall 방법론의 차이
-
Agile
- 소규모 다기능 팀
- 순차적이지 않은 진행
- 과제의 모듈화 및 우선순위 부여
- 유연하고 지속적인 진화
-
Waterfall
- 대규모 팀 구성
- 순차적 진행
- 예측에 기반한 계획
- 사전에 정의된 과제 (변경 불가)
Agile Scrum 및 Sprint
-
Scrum
스크럼은 애자일 개발의 한 방식으로, 'Sprint'라는 개발 주기를 정하고, 이 주기마다 계획을 구현한다. 각 스프린트의 끝에서는 생산된 프로토타입을 검토하고 사용자 피드백을 받는다. -
Sprint
최초 버전에 대한 스펙 결정 및 버전별 기능 개발을 포함한다.
Agile이 Waterfall보다 나은 점
Agile은 단기간에 작동하는 기능을 구현할 수 있으며, 문제 발생 시 빠른 회복이 가능하다.
Agile 방법론의 디자이너에 대한 장단점
- 장점
- 디자인을 완벽하게 할 필요가 없어 시간 절약
- 구현 가능 범위를 빠르게 파악
- 결과를 신속하게 확인
- 단점
- 전체적인 서비스 경험을 놓치기 쉬움
- 페이지 내 기능 간 통일성 결여 가능성
- 개발자 패턴에 맞춰야 하는 경향
이러한 제품 개발 방법론들은 각각의 특성과 요구사항에 따라 적합한 상황에서 사용되어야 한다. Agile과 Waterfall 방식 간의 선택은 프로젝트의 특성, 팀 구성, 시간 및 자원의 제약 등 여러 요소를 고려하여 결정되어야 한다.
사용자 스토리(User Story)와 인수조건(Acceptance Criteria)의 이해
사용자 스토리는 소프트웨어 개발 프로세스에서 매우 중요한 요소이다. 이는 서비스 고객에게 가치를 줄 수 있는 기능을 서술하는 것으로, 일상 언어를 사용하여 고객 가치에 대해 서술한다. 사용자 스토리의 크기는 한 두 명의 개발자가 반나절에서 최대 2주 안에 구현하고 테스트할 수 있는 정도여야 한다.
사용자 스토리의 구조
사용자 스토리는 Who, What, Why 즉, 사용자 역할, 이유/장점, 행위의 세 가지 주요 요소로 구성된다. 이 구조는 사용자 스토리가 명확하고 이해하기 쉬운 방식으로 서술되도록 도와준다.
예시 분석
"고객은 다음번 결제할 때는 정보를 입력할 필요가 없도록 카드 정보를 저장할 수 있다."
고객= 사용자 역할 (가입한 사용자)입력할 필요가 없도록= 장점 및 가치 (수고를 덜어줌)카드 정보를 저장= 행위 (기능으로 치환 가능)
인수조건(Acceptance Criteria)
인수조건은 사용자 스토리가 완결될 수 있는 기준을 제시한다. 이는 개발이 완료되었음을 나타내는 기능의 디테일과 제대로 구현되었는지 점검할 수 있는 테스트 항목을 포함한다.
상세 예시 분석
"고객은 다음번 결제할 때는 정보를 입력할 필요가 없도록 카드 정보를 저장할 수 있다."
Acceptance Criteria:
- 고객 이름은 필수로 입력되어야 하며 저장되어야 한다.
- 고객의 생년월일은 필수로 입력되어야 하며 저장되어야 한다.
- 고객의 카드 번호는 필수로 입력되어야 하며, 16자리여야 한다.
- 16자리 미만으로 입력 시 에러 메시지가 표시되어야 한다.
- 카드 번호가 유효하지 않을 경우 에러 메시지가 표시되어야 한다.
사용자 스토리와 인수조건을 명확하게 작성하는 것은 팀이 고객의 요구사항을 정확하게 이해하고, 이를 효과적으로 구현하는 데 중요하다. 이를 통해 프로젝트의 목표를 효율적으로 달성할 수 있으며, 고객 만족도를 높일 수 있다.
디자이너와 개발자: 생각의 차이와 협업을 위한 이해
작업을 진행하며 디자이너와 개발자 간의 생각의 차이를 알게 된다. 이 두 역할은 프로젝트에 대해 서로 다른 관점을 가지고 있으며, 이를 이해하는 것이 성공적인 협업을 위해 중요하다.
디자이너의 관점
- 페이지로 생각하기: 디자이너는 전체적인 페이지 레이아웃과 사용자 경험에 초점을 맞춘다.
- 시각화: 시각적 요소와 미적 디자인에 중점을 둔다.
- 사용자 입장에서 편리한 디자인: 사용자의 편의성을 고려하여 디자인을 구성한다.
개발자의 관점
- 기능으로 생각하기: 개발자는 기능적인 측면과 프로그래밍 로직에 중점을 둔다.
- 시스템화: 전체 시스템의 효율성과 기능적 구현에 초점을 맞춘다.
- 복잡한 기능 최소화: 효율적인 코드 작성과 시스템의 안정성을 위해 복잡성을 최소화한다.
디자이너가 알아야 할 개발 용어
디자이너는 개발 과정에서 사용되는 용어들을 이해하고, 이를 어떻게 적용하는지 알아야 한다. 이 지식은 디자이너와 개발자 간의 효과적인 커뮤니케이션에 도움이 된다.
App 개발 영역 (프론트엔드)
- Framework: 사용되는 프레임워크 종류 (예: Flutter, React Native)
- Android: 안드로이드 플랫폼에 특화된 디자인 요소
- iOS: iOS 플랫폼에 특화된 디자인 요소
Web 개발 영역 (프론트엔드)
- Responsive: 반응형 디자인의 중요성 및 기술
- Vue.js, React.js: 사용되는 JavaScript 프레임워크
- HTML: 웹 페이지의 구조와 마크업 언어
Server 개발 영역 (백엔드)
- AWS: 클라우드 서비스 플랫폼
- Node.js: 서버 측 JavaScript 실행 환경
DB 개발 영역 (백엔드)
- MySQL: 데이터베이스 관리 시스템
디자이너와 개발자 간의 성공적인 협업을 위해서는 서로의 역할과 관점을 이해하고, 상대방의 언어를 이해하는 것이 필수적이다. 이를 통해 팀은 보다 효율적으로 작업을 진행하고, 최종 제품의 품질을 향상시킬 수 있다.
컴포넌트 디자인: 효율적인 디자인을 위한 필수 요소
효율적인 디자인을 위해 중요한 두 가지 요소는 레이아웃 그리드 시스템과 타이포그래피이다. 이러한 요소들은 디자인과 개발의 다리 역할을 하며, 일관성 있는 사용자 경험을 제공하는 데 중요하다.
레이아웃 그리드 시스템(Layout Grid System)
레이아웃 그리드 시스템은 UI 요소를 배치할 때의 기준이 되며, 특히 다양한 해상도에 대응하는 웹 디자인에서 중요하다.
그리드 시스템의 핵심 요소
- Column: 콘텐츠가 들어가는 부분
- Gutter: 칼럼 사이의 공간
- Margin: 칼럼과 거터를 제외한 사이드 공간
디자인과 개발의 차이
- 디자인: 위치, 크기 설정 및 픽셀 값으로 시작점 정의
- 개발: 전체 너비 설정 및 요소를 row와 column으로 배치
레이아웃 전달 방법
- 콘텐츠가 차지하는 칼럼 수와 거터 값 (예: 16px, 20px, 24px, 32px) 정의
타이포그래피(Typography)
폰트 단위
- Pixel: 화면 최소 단위
- Point: 타이포그래피의 전통적인 인쇄 단위
폰트 두께
- 선택한 폰트(나눔고딕, 나눔스퀘어, 노토산스)를 기준으로 최대 4개의 두께(light, Regular, Bold, Extra Bold)로 제한
디자인과 개발에서의 폰트 시스템 차이
- 디자인: 폰트 스타일, 색상, 크기, 두께, 간격, 줄 간격으로 구분
- 개발: 폰트 크기, 행간 정의 (예: 기본 폰트 사이즈 14px, 1em, 2em, 4em으로 스케일 조정)
타이포그래피 전달 방법
- 기본 폰트 크기 설정 (예: 14px, 1.5, normal)
- 웹 서비스에서 사용하는 모든 폰트 크기와 속성 정의
- 이름 정의 (예: h1, body)
- 각 페이지별 사용 폰트를 이름으로 전달
typo scale을 자동으로 계산해주는 웹사이트
typo scale을 sketch app 파일로 변환해주는 웹사이트
온오프라인에서 어떤 폰트들을 사용하고 있는지 확인할 수 있는 곳
웹 디자인의 핵심 요소: 컬러, 이미지, 아이콘
웹 디자인에서 컬러, 이미지, 아이콘은 사용자 경험을 풍부하게 만드는 데 핵심적인 역할을 한다. 이들 요소는 디자인과 개발 양쪽에서 다르게 접근되며, 효과적인 전달 방법이 필요하다.
컬러(Color)
디자인과 개발에서의 차이
- 디자인: 컬러 피커 및 스포이드 기능 사용
- 개발: 컬러 변수 정의, RGBA와 HEX 값으로 텍스트 정리
컬러 전달 방법
- 사용 컬러 범위 정의 (예: red, blue, dark-blue)
- 컬러 세트 생성 및 명명 (예: red10, blue100)
- JSON 파일 형식으로 전달
- 소통 시 컬러 이름 사용 (예: "blue-500 사용해주세요.")
이미지(Image)
이미지 최적화
- 사이트 로딩 시간 최소화를 위해 이미지 크기 최적화
- 다단계 이미지 로딩 사용
이미지 전달 방법
- 이미지 목적 고려
- 콘텐츠 비율 중요성 판단
<img>태그 사용 시 이미지 크기 및 비율 조절- 배경에 삽입되는 이미지의 경우
{background}사용 - 이미지 편집 시 중요 부분 중앙 배치
- 로딩 패턴 고려하여 전달
아이콘(Icon)
아이콘의 활용
- 웹에서 많이 사용되는 확장자는 SVG와 PNG
- SVG는 코드로 구현 가능하며 애니메이션 추가, 색상 및 사이즈 조절 용이
- PNG는 고정된 이미지로, 정적인 상황에 적합
디자이너가 챙겨야 할 States of UI Design
데이터의 양 (최소/최대치)
데이터의 유무에 따른 상태
사용자 과업에 대한 상태
사용자 유형에 따른 상태
