GitLab Meetup #09 - 2022년 1월 27일 GitLab의 전 직원은 원격 근무를 하고 있습니다. UX 디자이너가 제품 개발 프로세스에 어떻게 참여하고, 협업하는지에 대해 설명합니다. 구글 문서로 작성된 내용이라, 이 링크에서 보시는게 폰트가 더 깔끔합니다: https://docs.google.com/presentation/d/164EJB4u_F9pjAm2HcE0vtlS6C7QFONqHNZAahtaFRBM/edit?usp=sharing

1. GitLab Korea #9
깃랩의 UI/UX 디자인 프로세스
2022.01.27
박선정
Senior Product Designer@GitLab

2. 👋 Guten Abend!

3. Now & Then

4. 🦊 UX 팀 구성

5. UX 팀
프로덕트 디자인 (PD) + 사용자 리서치 (UXR) + 테크니컬 라이팅 (TW)
UX Department 🦊

6. Product Design (PD)
제품 개발
디자인 시스템 관리
디자인 파운데이션
프로덕트 팀 배치
Product Design team

7. User Research (UXR)
GitLab First Look
● UX 리서처
● UX 리서치 코디네이터
구성
UX Research team / GitLab First Look

8. Technical Writing (TW)
● GitLab 문서 작성 및 관리
● UI 텍스트 관리
Technical Writing team / GitLab docs 📚

9. 프로덕트 디자이너 업무 관리
GitLab
● 디자인 업무 단위 (이슈)
● 디자인 QA (머지 리퀘스트)
● OKR 관리 (Ally와 함께 사용
)
Figma
● 프로토타이핑
● 디자인 시스템 관리

10. 기타 툴셋
사용자 리서치 회의 기록
OKR
● Dovetail: 사용자 리서치 기록
● Mural: 사용자 플로우 맵핑 및
브레인스토밍
● UserTesting: 디자인 검증

11. 🚀 제품 개발 팀과 UX는 어떻게 함께 일할까?

12. 깃랩 Geo
GitLab Geo 🚀
Geo를 이용하여
전 세계에 분산돼 있는 팀이
가장 가까운 GitLab 인스턴스를 자
동으로 사용할 수 있도록 도와주는
툴

13. 지오 팀 구성
피엠 1 + 디자이너 1 + 리서처 1 + 테크니컬 라이터 1
+ 개발 9 (백엔드+프론트엔드) + QA 1
🇺🇸🇩🇪🇧🇷🇮🇳🇰🇷🇬🇧🇺🇦
Geo team 🦊

14. 팀 내부 소통
Geo team build board / Geo team planning board
● 🗺 플래닝 미팅 (매주 목요일)
● ☕️ 커피챗 (1달에 2회)
● 👻 비정기적 1-1
● 🐥 스탠드업 (Geekbot, 매주 월요일
)
● 기타 모든 소통!
팀 미팅 비동기식 소통

15. 디자인 프로세스
기획 프로토타이핑
🗺 제품 로드맵
💡 리서치 인사이트
🗺 팀 멤버의 아이디어
🗺💻👩💻 커뮤니티의 요
청
디자인 검증
🔍 Solution validation (사용자)
🗺 디자인 리뷰 (팀)
🎨 Pajamas 디자인 시스템
(Figma, Vue)

16. PM-UX 협업
● 주제 별 에픽 작성 (로드맵)
○ 주로 PM이 작성하지만, 주제에 따라 작성하고 리딩하는 역할자는 다양함
● 관련 이슈들을 하나의 에픽에 모으기 (POC, 리서치, 디자인, 개발 등)
● 디자인 방향성 잡기
○ Journey map 등을 이용하여 사용자 플로우 만들기
○ 빠른 프로토타입으로 방향성 검증하기
Maintenance mode 에픽 / Journey map 예시

17. 프로토타이핑을 더 빠르게, 디자인 시스템!
Pajamas design system / Vue library (storybook) / Pajamas on Figma
Figma Storybook

18. 🔮 비동기식으로 디자인 하기

19. 비동기식으로 디자인 협업하기
Sketching session
스케치 세션
● 기획 단계
● 모두가 디자인 단계에 참여할
수 있도록 하는 좋은 방법!
● 팁: 마감일 설정하기, 최대한
다양한 채널에 홍보하기 (데일
리 스탠드업 등에서도 홍보 가
능!)

20. 비동기식으로 디자인 협업하기
출처: 내가 광고회사 힘들다 그랬잖아
디자인 리뷰 절망편

21. 비동기식으로 디자인 협업하기
Design review
디자인 리뷰!
● 프로토타이핑을 마친 후
● 자주 쓰는 질문들
○ Likes: What you liked
about?
○ Ideas: Do you have any
idea to improve the
design?
○ Challenges: Do you see
any feasibility issue?

22. 비동기식 협업의 단점 - 기다려야 한다.
어떤 부분이 기다려도 되는 부분이고, 어떤 일은 기다려야 하는지 잘 구분 해야 한
다.
MR example

23. 💡 한 번에 작은 것 부터!

24. 한 번에 크게 바꾸고 싶다..!
출처: Giphy

25. Iteration!
GitLab Values - Iteration

26. Minimum Viable Change (MVC)

27. 한 이터레이션, 그 크기는?
● 한 Iteration의 범위는 어떻게 정하나?
○ PM과 개발자와 명확하게 소통하기 (필수)
○ 사전 리서치 인사이트가 있다면 디자인 단계에서 쉽게 결정 가능하지만,
만약에 사전 리서치가 없었다면 Solution validation을 통해 사용자와 검증을 해보기
○ 다음 이터레이션에 대한 팔로업은 필수!

28. 🎨 커뮤니티와 함께 하는 디자인

29. 커뮤니티 멤버와 함께 고치는 버그
MR / Product
커뮤니티 기여 예시 - UI 버그 출현! 🐛

30. 깃랩 UI에 기여하고 싶으신가요?
이슈나 MR만들 때 잊지 말아야 할 것들!
스크린샷이나 동영상 추가하
기
UX와 Frontend 라벨 지정하
기

31. 지난 2년간 배운 점
● 🗺 상황에 맞게 동기식 / 비동기식 커뮤니케이션 하는 것이 중요.
○ 효율적인 비동기식 커뮤니케이션을 하기까지는 시간이 걸리니, 너무 조급하게 생각하지 말자!
○ 팀원들의 배경이 다양할때, 비동기식 협업이 더 공정한 소통의 기회를 만들기도 한다.

32. 지난 2년간 배운 점
● 💡 기능 개발 및 릴리즈는 작게 나누어서!
○ 가장 작게 나눈 단위의 릴리즈가 사용자에게 어떤 의미를 주는지 잊지 않는다.

33. 지난 2년간 배운 점
● ✍️ 오픈 소스 디자인, 좋은 점이 더 많다!
○ 모두가 내 디자인을 볼 수 있다. → 가끔은 부끄럽다.
○ 투명하게 의사 결정 과정을 공개하는 팀에서 일하는 것은 기쁜 일이다.
○ 그렇지만, 커뮤니티에서 좋은 의견을 내며 개발 과정에 참여하기도, 버그를 고쳐주는 일도 생긴
다!

34. We want you and welcome you,
open source contributors! 🙌
💡 GitLab 기능에 대한 의견/ 버그 리포트 → 이슈 열기
✍️ 기존 이슈에 컨트리뷰션하려면? → 이슈 찾기
이슈 라벨: “Accepting merge request” “Hackathon” “Seeking community contributions”

35. 감사합니다! 🙇♀️
Let’s connect and drop me a message on Linkedin!
https://www.linkedin.com/in/sunjung27/