[내일 배움 캠프] 11일차
제품팀
제품을 만들기 위해 다양한 직무의 인원이 모인 조직이며, 최소 제품관리자(PO/PM), 디자이너 한 명 이상, 엔지니어 두 명 이상이 반드시 포함되어야 한다.
제품 제작에는 기획, 디자인, 개발이 기본적으로 요구되며, 팀에 따라 데이터 애널리스트, 마케터, Business Operator(BO)가 추가로 포함될 수 있다.
목적 조직
다양한 직무(기획, 디자인, 개발 등)의 사람이 특정 목표 달성을 위해 모여 빠르고 효율적으로 제품과 기능을 만드는 조직이다.
스쿼드나 사일로로도 불리며, 상품(대출, 카드, 예적금 등)이나 기능별로 팀이 구성되는 특징이 있다.
기능 조직
동일 직무의 사람들이 팀을 이루며, 전문 분야의 교류와 심층 논의를 통해 전문성을 높일 수 있다.
각자의 약점을 이해하고 보완하여 개인과 팀의 발전이 가능하다는 장점이 있고, 필요 시 TF(Task Force) 형태로 목적 조직을 임시로 구성할 수 있다.
매트릭스 조직
목적 조직과 기능 조직이 크로스된 형태이다.
속도를 빠르게 가져가는 목적 조직의 장점과 전문성이 높아지는 기능 조직의 장점을 다 가져간다.
린 스타트업
'군더더기 없는'이라는 뜻을 바탕으로, 최소한의 자원으로 제품을 만들고, 테스트하고, 결과를 반영해 반복 학습하는 구조이다.
만들기-측정-학습의 순환 과정을 통해 빠르게 사용자 피드백을 받고 개선하는 데 있다.
애자일 방법론
빠른 제품 출시와 사용자의 피드백 반영을 통해 제품을 개선하는 것을 목표로 하며, 린 스타트업과 목적은 유사하지만 실행 방식이 더 구체적이다.
애자일의 사전적 의미는 날렵함, 민첩함으로, 실제 업무에서도 짧은 개발 주기(1주~4주)로 기획, 디자인, 개발, 테스트를 반복하는 구조를 가진다.
폭포수 방식
단계별로 수직적, 독립적으로 진행되며 대부분 다시 돌아가지 않는 구조로, 대기업 등 규모가 큰 조직에 적합하지만 속도가 느리고 시장 변화에 유연하게 대처하기 어렵다.
폭포수 방식은 각 단계(기획→디자인→개발→테스트)간의 종속성이 강해 전체 프로세스가 길어지고, 시장의 빠른 변화를 따라가기 힘들다.
디자인 프로세스
UX/UI 디자이너는 요구사항 설계를 포함한 기획, 디자인, 개발 전 과정에 폭넓게 참여한다.
기획 단계
문제 정의와 아이데이션, 프로덕트 스펙 문서 작성이 주요 업무이며, 여기서 제품 목표에 따라 우선순위를 정한다.
문제 정의는 솔루션 도출의 출발점이며, 초기부터 디자이너의 참여가 매우 중요하다.
다양한 아이디어를 도출하고, 그 중에서 가장 적합한 솔루션을 선택해 기획과 아이디어가 잘 보이도록 와이어프레임 형태로 그리는 러프한 솔루션 스케치를 진행하여 논의한다.
솔루션이 구체화되면 글로 정리한 프로덕트 스펙 문서를 먼저 작성함으로써, 디자인 완성 전에도 엔지니어가 미리 이해하고 준비할 수 있다.
디자인 단계
디자이너의 역할이 가장 중요하며, 초안 디자인을 만들고 피드백을 반영해 최종 디자인으로 확정한다.
초안 디자인은 전체 사용자 경험(UX)에 중점을 두어서, 프로젝트 스펙 문서에 누락된 케이스나 다양한 유저 시나리오를 꼼꼼히 점검하는 것이 중요하다.
피드백에서는 팀원들과 디자인을 공유하고, 필요에 따라 프로토타이핑을 활용해 유저 플로우와 검증 과정을 강화한다.
최종 디자인은 확정 후 엔지니어에게 핸드오프되며, 이때 디자인만 전달하지 않고, 가이드 등 추가 자료를 함께 제공한다.
디자인 핸드오프
디자이너의 의도를 충분히 전달할 수 있도록 화면 외에도 추가적인 세 가지 내용을 포함하는 것이 바람직하다.
유저 플로우 작성은 여러 화면 간의 연결과 사용자의 실제 흐름을 충분히 고려하여 설계해야 하며, 이는 엔지니어가 전체 동작 과정을 명확히 이해하고 구현할 수 있게 한다.
유즈 케이스는 각 화면에서 발생할 수 있는 다양한 상황(예: 정상, 에러, 타임아웃 등)을 빠짐없이 정의해야 하며, 유저의 행동에 따라 동적으로 변경되는 화면까지 구체적으로 명시해야 한다.
반응형 레이아웃은 여러 디바이스 상황에서 화면이 어떻게 늘어나고 줄어들어야 하는지 상세히 정의해야 하며, 실제 개발에 참고할 수 있도록 회사의 표준 해상도 기반 예시와 함께 제공하는 것이 효과적이다.
디자인 피드백 단계
디자인 고도화와 최종 결과물의 완성을 위해 매우 중요하며, 반복되는 피드백 과정을 통해 디자인이 단단해진다.
기획 배경과 맥락, 그리고 전반적인 히스토리를 피드백 제공자에게 충분히 설명해야 하며, 필요한 정보를 명확히 함께 전달하는 것이 중요하다.
피드백 요청 시에는 프로덕트 스펙 문서 첨부, 디자인 솔루션의 배경과 의도, 시각적으로 강조하고 싶은 부분, 영향받는 범위, 참고 가능한 링크(피그마, 프로토타입 등), 필수 리뷰어 지정, 참고팀 태그, 피드백 기한 명시 등이 포함되어야 한다.
제품 개발에서 PO/PM, 엔지니어의 핵심 역할
PM(Product Manager)은 제품의 전략을 세우고 우선순위를 정해 실행하며, 디자이너와 함께 아이디어를 구체적인 솔루션으로 만드는 실무 중심의 역할이다.
PO(Product Owner)는 제품의 전체 관리와 방향성, 팀 환경 조성까지 책임지며, PM보다 더 많은 권한과 책임을 가진 미니 CEO 역할을 한다.
PO와 PM 모두 제품 개발에 중요한 역할을 하지만, PO는 관리와 전략, PM은 실행과 실무에 특징이 있으며, 이 두 역할의 범위와 권한은 회사마다 상이할 수 있다.
협업의 중요성
협업의 질이 곧 제품의 질을 결정하며, 각 직무 리소스를 낭비 없이 좋은 솔루션 개발에 집중하는 것이 협업의 핵심이다.
UX, UI 디자이너의 역할
제품을 만드는 과정에서 필수적이며, 실무에서는 각 상황별로 적절한 영향력을 가져야 한다.
PO와 PM의 차이점
PO는 PM보다 더 많은 역할과 책임이 주어지며, 제품 뿐만 아니라 팀원 및 이해관계자 관리까지 담당한다.
결론적으로, PO는 PM보다 상위 개념으로, 제품 개발의 방향성과 환경을 총괄적으로 관리한다.
PO와 PM은 전략 설계, 지표 관리·분석 등 겹치는 업무가 많지만 실제로는 맡는 업무 범위와 관점이 다르다.
디자인 툴
디지털로 이미지를 만들거나 편집할 수 있는 컴퓨터 프로그램이며, 디자이너에게 가장 중요한 무기이다.
UX/UI 디자이너가 주로 사용하는 인터페이스 디자인 툴에는 피그마, 스케치, XD가 있다.
그래픽 디자인 툴
사진 편집이나 일러스트 작업에 사용되며, 대표적으로 포토샵(비트맵 기반)과 일러스트레이터(벡터 기반)가 있다.
3D 그래픽 디자인 툴
시네마 4D(유료)와 블렌더(무료)가 있으며, 3차원 이미지를 제작하는 데 쓰인다.
모션 그래픽 디자인 툴
프리미어(영상 편집)와 애프터 이펙트(그래픽에 움직임 추가)가 있으며, 각각 목적에 따라 활용된다.
비트맵 이미지
픽셀로 구성되며, 각 픽셀은 디지털 이미지를 구성하는 최소 단위의 점이다.
각 픽셀은 색상 등 그래픽에 대한 비트 정보를 가지고 있으며, 이 정보들이 모여 하나의 이미지로 완성된다.
jpg, png, gif 등의 파일 확장자를 가진 이미지에서 많이 사용된다.
픽셀 수가 많을수록 화질이 좋아지지만, 용량이 커지고 임의로 확대·축소할 경우 픽셀 손상으로 품질 저하가 발생한다.
벡터 이미지 원리와 장점
그래픽을 수학적 함수 공식으로 표현하며, 점과 점을 연결해 선과 면을 만들어 이미지를 구성한다.
좌표계 기반 벡터 이미지는 이미지를 아무리 줄이거나 키워도 손상이 발생하지 않는 것이 핵심적인 장점이다.
인터페이스 디자인 툴의 세 가지 핵심 공통점
피그마, 스케치, 어도비 XD는 모두 벡터 기반으로 설계되어 이미지의 크기를 조절해도 손상 없이 사용 가능하다.
세 툴 모두 반응형 디자인에 적합하여 다양한 디바이스의 스크린 크기에 효율적으로 대응할 수 있다.
Lo-fi 프로토 타이핑 기능을 내장하여, 별도의 툴 없이 화면 간의 간단한 연결과 테스트가 가능하다.
디자인 작업 후, 파일 이동 없이 바로 코드 변환이 가능해 엔지니어와의 협업이 매우 용이하고 효율적이다.
백터 방식이 반응형 디자인에 필수적인 이유
다양한 디바이스의 스크린 크기에 맞춰 인터페이스를 조정해야 하는 경우가 많다.
비트맵 방식은 이미지를 늘리거나 줄일 때 이미지 손상이 발생한다.
비트맵 손상 문제로 인해 디자이너가 디자인을 새로 해야 하는 고충이 생긴다.
벡터 방식을 사용하면 이미지 손상 없이 자유롭게 그래픽 크기를 조정할 수 있다.
Lo-fi 프로토타이핑이란
화면과 화면 사이 연결 등 가벼운 기능 구현에 사용되는 도구이다.
피그마, 스케치, 어도비 XD 모두 간단한 Lo-fi 프로토타이핑 기능을 제공한다.
세 툴 모두 한 툴 내에서 별도의 추가 툴 없이 디자인한 화면을 쉽게 이어서 시뮬레이션할 수 있다.
Dev Mode
전통적 그래픽 툴과 최신 인터페이스 디자인 툴의 중요한 차이점이자 강력한 기능이다.
피그마, 스케치, 어도비 XD등 세 가지 디자인 툴은 모두 코드 변환이 가능한 Dev Mode를 지원한다.
디자인한 화면을 바로 코드로 변환하여 시각화할 수 있으므로, 별도의 툴을 통해 변환하는 번거로운 과정이 사라졌다.
이러한 기능 덕분에 엔지니어와의 협업이 현저하게 용이해졌다.
피그마는 파일을 각자의 컴퓨터에 저장하지 않고 클라우드에 저장하여, 인터넷만 가능하다면 언제 어디서든 파일 열람과 편집이 가능하다.
피그마는 클라우드 기반으로 별도의 파일 전송 없이 동시에 공동 작업이 가능하다.
장소를 불문하고 인터넷에 접속만 하면 피그마 파일을 쉽게 확인하고 편집할 수 있다.
멀티 플랫폼 지원으로, 데스크톱 유틸리티 설치 없이 웹 브라우저(크롬, 엣지 등) 에서도 대부분의 기능을 동일하게 사용할 수 있다.
프로토타이핑 툴
제품의 화면 움직임과 인터랙션을 구현해, 코드 없이 아이디어나 컨셉을 테스트할 수 있는 도구이다.
사용자 테스트뿐 아니라 팀 내에서 디자인을 효과적으로 공유하는 데에도 활용된다.
