17. 중간점검: 고객 경험을 만드는 PM 전략 (6)
16. 협업에서 사용되는 Tool 2
1) 디자인에 활용되는 Tool
1. Low fidelity Design 도구
- 목적: 스케치 형태로 아이디어션(Ideation)을 빠르게 작성
- 사용 예: 와이어프레임 작성
- 예시 도구
2. High fidelity Design 도구
- 목적: 상위 단계의 디자인 작업 수행
- 예시 도구
3. Motion Design 도구
- 목적: 모션 디자인 설계 및 디자인
- 예시 도구
4. 협업 도구
- Slack(슬랙)
- Abstract(앱스트랙): 스케치 작업 시 공동작업 환경 마련
1-2) PPT/Excel 작업의 문제점
- 실시간 수정사항 확인 불가
- 문서 내 커뮤니케이션 어려움
- 해상도 확인 어려움
- 공간적인 제약
- 수정사항에 대한 대응 공수 많음
- 이슈사항 관리 어려움
- 수정 단계의 복잡성
1-3) 최근의 개선 사항
- 무한 페이지 추가 가능
- 스케치의 '심볼', 피그마의 '컴포넌트' 사용
- 이전/후 화면 빠른 확인
2) 협업/디자인에서 활용되는 Tool의 종류 및 특징
1. Slack(슬랙)
- 기능: 프로젝트 커뮤니케이션 도구로, 카톡과 유사함.
2. Balsamiq(발사믹)
- 기능: 아이디어를 스케치하고 ‘와이어프레임’을 만드는 Low Fidelity Prototype 제작 도구.
3. Invision(인비전)
- 기능: 디자인 결과물을 실시간으로 공유하며, 각 화면들의 진행 상황을 구분하고 온라인 피드백을 받을 수 있는 Prototyping 및 Co-Work 도구.
4. Sketch(스케치)
- 기능: MAC, Web App에서 사용 가능한 Vector Design 도구로, 포토샵과 일러스트레이터의 무거운 파일 대신 앱에 최적화된 디자인 작업을 지원.
4-1. Sketch의 주요 특장점
1. 타겟 디바이스 및 OS 환경에 맞는 디자인 환경 설정
· 기능: 타겟 디바이스와 OS 환경에 맞춰 해상도와 가이드라인을 빠르게 설정할 수 있음.
· 이점: OS 공통 컴포넌트 요소들을 즉시 화면에 적용 가능.
2. Symbol을 통한 디자인 요소의 재사용 및 공유
· 기능: 반복해서 사용되는 요소들, 컬러, 텍스트 스타일을 'Symbol'로 만들어 스타일을 공유.
· 협업 용이: 부모 Symbol을 변경하면 연결된 자식 Symbol들도 자동으로 변경됨. 필요에 따라 Symbol 제거 가능.
3. 협업에 용이
· 기능: 공동 작업 시 일관성 있는 플랫폼 제작 지원.
· 이점: 팀원 간의 협업을 쉽게 만들어줌.
4. 다양한 Plug-In 지원으로 확장성 우수
· 기능: Sketch 기본 제공 기능 외에 다양한 확장 서비스를 추가할 수 있는 Plug-In 개발 지원.
· 예시: Auto-Layout(반응형 페이지 개발), Rename It(특정 텍스트 일괄 수정) 등.
5. 모바일 디바이스에서의 실시간 확인
· 기능: [Sketch Mirror] 앱을 설치하여 모바일 디바이스에서 실시간으로 디자인 확인 가능.
· 이점: 프로토타입을 통해 다음 이동 화면까지 구현 및 확인 가능.
5. Abstract (앱스트랙)
5-1. 분업 및 협업 도구로서의 기능
· 목적: Sketch와 함께 사용하여 분업을 목적으로 한 협업 도구.
· Branch 기능: 동시에 분업 작업이 가능하게 함. 예를 들어, 다른 디자이너가 작업한 내용을 업로드 시 마스터 파일로 합칠 수 있음.
· Merge 기능: 다양한 작업을 하나의 마스터 파일로 합치는 기능을 제공. 예를 들어, 다른 디자이너가 동일한 화면에 대해 작업할 때 A/B안 중에서 선택할 수 있음.
· Real Time: 최신 결과물을 실시간으로 확인할 수 있음.
· Version 관리: 작업의 히스토리를 저장하고 복원할 수 있는 기능을 제공.
· Communication: 멤버들 간에 코멘트를 남길 수 있는 기능.
5-2. Abstract (앱스트랙)의 문제점
· 로딩 시간: 협업하는 사람들이 디자인 파일을 확인할 필요가 있으나, 디자인 파일이 무거워 로딩 시간이 길다는 문제가 있음.
6. Zeplin(제플린)
6-1. 사용 목적 및 과정:
· 디자인 결과물 배포: Figma(피그마)나 Sketch(스케치)에서 작업한 디자인 결과물을 Zeplin(제플린)에 업로드하여 협업하는 팀원들에게 배포.
· 역할별 작업 진행: 최종 결과물을 확인한 후, 기획자는 기획 의도에 맞게 검수를 진행하고, 개발자는 개발 작업을 시작.
6-2. 역사적 변화:
· 과거: PPT를 사용하여 작업한 가이드라인을 정의.
· 현재: GUI(Graphical User Interface) Guideline을 대체하는 도구로서, 디자이너와 개발자의 업무를 효율적으로 변화시키는 역할.
6-3. 단점:
· 업로드 속도 및 누락 문제: Zeplin(제플린)에 디자인 결과물을 업로드할 때, 속도가 느릴 수 있으며, 데이터가 중간에 누락될 수 있어 최종 결과물 확인이 필수적.
6-4. Zeplin(제플린)의 특장점:
1. 자동으로 스타일 가이드 생성
· 제플린은 업로드된 디자인에서 자동으로 스타일 가이드를 생성.
2. 개발 코드 제공
· 요소(Components)를 클릭하면, 자동으로 웹(Web), iOS, 안드로이드(Android) 가이드를 제공하며, 개발 코드를 생성.
3. 커뮤니케이션 향상
· 댓글(Comment) 기능을 통해 개발자 및 이해관계자들과 효율적으로 커뮤니케이션할 수 있으며, 이를 통해 미팅 시간을 최소화할 수 있다.
7. Figma(피그마)
7-1. 플랫폼 독립성
· 호환성: Windows, Mac, Web Browser에서 모두 실행 가능.
· 비교: Sketch는 Mac 환경에서만 사용 가능한 반면, Figma는 PC OS 환경에 독립적으로 작동.
7-2. 온라인 작업 가능성
· 접근성: 인터넷이 연결되어 있다면 언제 어디서든 작업한 파일에 접속할 수 있다.
7-3. 공동 작업 기능
· 협업 최적화: 여러 작업자가 동시에 작업할 수 있는 구글 드라이브처럼 최적화된 UX/UI 도구.
· 용어의 간소화: Branch, Merge와 같은 복잡한 용어 사용 없이 드라이브처럼 협업이 가능.
7-4. 피드백 시스템
· 직접적인 피드백: Zeplin, Invision에 업로드하지 않아도 Figma 내에서 직접 댓글을 남길 수 있으며, Slack과 연동하여 피드백을 관리할 수 있다.
7-5. 프로토타입 생성
· 간편한 전환 효과: Figma 내에서 간단한 전환 효과를 적용하여 바로 프로토타입을 만들 수 있다.
7-6. 자동 저장 및 버전 관리
· 데이터 관리: 작업 내용은 자동으로 서버에 저장되며, 별도의 애플리케이션을 사용하지 않고도 버전 관리가 가능.
7-7. Figma의 특장점
1. Design Asset & Style
· 일관성 있는 디자인 제공: 원하는 아이콘을 어느 위치에든 배치 가능하며, 컬러 및 크기 등의 속성 변경이 용이.
1. Collaboration
· 협업의 용이성: 구글 드라이브처럼 공동으로 작업하고, 누가 작업했는지 follow up이 가능.
· 타 디자인 도구인 Abstract는 각자 다운로드하고 Merge하는 불편함이 있지만, Figma는 이러한 문제를 해결.
· 작업 과정에서 누가 어떤 작업을 했는지 기록하고, 작업물에 대한 코멘트를 남길 수 있다.
1. Component
· 스타일 일관성: 부모 컴포넌트의 스타일이 자식 컴포넌트에게 자동으로 반영.
· 스케치와 달리, 부모/자식 컴포넌트가 각자의 속성을 독립적으로 관리할 수 있다.
1. 개발 코드 제공
· 기기 종류별 맞춤 코드 제공: Android/iOS 등 기기 개발 코드를 제공하여, 개발 과정을 용이하게 한다.
1. Plugin (Content Reel Plugin)
· 콘텐츠 삽입 용이: 정해진 영역 내에 이미지 삽입을 간편하게 할 수 있다.
1. Prototype
· 프로토타입 생성: 요소들 간의 연결을 설정하고, [Play]버튼을 눌러 바로 구현을 확인할 수 있다.
1. Figma + Slack의 조화
· 효율적인 커뮤니케이션: 멘션 및 파일 공유가 모두 가능하여, 팀 내 커뮤니케이션이 원활.
추가 추천
· 스타트업 초기 디자인 툴로서의 조화: Figma(디자인) + Zeplin(결과물 공유) + Slack(커뮤니케이션)의 조합을 추천.
· Figma는 기획자가 와이어프레임으로 스케치하기에 적합.
· Zeplin은 코드화 및 정리/공유 목적으로 사용.
· Slack을 통해 모든 자료를 한 곳에서 볼 수 있으므로, 효율적인 팀워크를 지원.
18. 추천 사이트 및 추천 도서
1) Article 및 디자인
- Medium (해외)
- Brunch (국내)
- Marvel
- WebDesigner News
- Sitepoint (Design & UX)
2) 디자인 영감 및 작업물 공유 플랫폼
- Dribbble
- Behance
- Notefolio
3) 추천 사이트 및 도서:
- OKR 전설적인 벤처투자자가 구글에 전해준 성공방식
- Data-Driven UX
- UX/UI의 10가지 심리학 법칙 (1~2시간 소요)
- 비전공자를 위한 이해할 수 있는 IT지식
- 조직을 성공으로 이끄는 프로덕트 오너
- 처음부터 다시 배우는 서비스 디자인 씽킹 (3번 이상 숙지)
'PM(Product Manager) > 학습일지 7주차' 카테고리의 다른 글
| 5 day 2024.05.17. (0) | 2024.05.17 |
|---|---|
| 4 day 2024.05.16. (0) | 2024.05.16 |
| 3 day 2024.05.15. (0) | 2024.05.15 |
| 2 day 2024.05.14. (0) | 2024.05.15 |
| 1 day 2024.05.13. (0) | 2024.05.13 |
