내가 사랑했던 개발자들 : 더 나은 협업을 위한 디자이너, 기획자 이해하기 유두선 NAVER / 파파고 UX UX 디자이너로 네이버에 입사한지 5년 차입니다. 지금은 파파고에서 기획(이라고 쓰고 서비스에 필요한 일이면 다) 하고 있습니다. 개발자분들과 붙어서 일하다보니 SQL은 모르지만 가끔 쿼리문도 던져보게 되고 json을 읽기도 하고, 요새는 파이썬 책을 읽지는 않고 사모으고만 있네요.

2. Session 3.
내가 사랑했던 개발자들:
더 나은 협업을 위한 디자이너, 기획자 이해하기
NAVER 파파고팀 유두선

3. 유 두 선
john.doosun.yoo@gmail.com

4. 시각
디자인
UX
네이버
디자인

5. 개발..orz

6. 1. 뭐하는 사람들인가
- UI / 인터렉션 / BX 디자이너의 일
- UX / 기획자의 일
2. 그들의 생각
- 디자이너 : 왜 1px을 옮겨달라고 할까
- 기획자 : UX적으로(??) 해결해달라구요?!
3. 어떻게 일하면 좋을까
- 상세 설계 공유방식에 대한 고민
- 커뮤니케이션
4. 혹시 디자인에 관심이 있으시다면
5. 내가 사랑했던 개발자들
목차:

7. 들어가기 앞서..

8. 1. 뭐하는 사람들인가
: UI / 인터렉션 / BX 디자이너의 일

9. 개발자

10. FE BE Markup
JAVA Swift React

11. 디자이너

12. UI? UX? BX?
영상? 인터렉션? Graphic?
원화? 배경? 3D?

13. UI? UX? BX?
영상? 인터렉션? Graphic?
원화? 배경? 3D?

14. UI 디자이너
User Interface Designer
사용자 인터페이스 디자인하는 사람
주로 쓰는 툴
스케치 제플린 포토샵
결과물 : UI 디자인 및 가이드

15. UI 디자이너
User Interface Designer
사용자 인터페이스 디자인하는 사람
주로 쓰는 툴
스케치 제플린 포토샵
결과물 : UI 디자인 및 가이드

16. 인터렉션 디자이너
화면간 트랜지션 또는 서비스 UI에 필요한
애니메이션 / 인터렉션 디자인 하는 사람
주로 쓰는 툴
스케치에팩 포토샵
결과물 : 인터렉션 가이드, 애니메이션 json
프리미어 프레이머

17. 인터렉션 디자이너
화면간 트랜지션 또는 서비스 UI에 필요한
애니메이션 / 인터렉션 디자인 하는 사람
주로 쓰는 툴
스케치에팩 포토샵
결과물 : 인터렉션 가이드, json
프리미어 프레이머

18. BX 디자이너
브랜드 아이덴티티 및 전략 디자인
브랜드 커뮤니케이션(주로 마케팅) 관련된 디자인 하는 사람
주로 쓰는 툴
결과물 : BI, 브랜드 커뮤니케이션 관련 온오프라인 디자인
포토샵일러스트 인디자인

19. BX 디자이너
브랜드 아이덴티티 및 전략 디자인
브랜드 커뮤니케이션(주로 마케팅) 관련된 디자인 하는 사람
주로 쓰는 툴
결과물 : BI, 브랜드 커뮤니케이션 관련 디자인 결과물
포토샵일러스트 인디자인

20. Graphic 디자이너
서비스에 필요한 아이콘 또는 일러스트와 같은
그래픽 요소를 그리는 사람
주로 쓰는 툴
포토샵
결과물 : 아이콘, 일러스트 등 다양한 그래픽 요소
일러스트

21. Graphic 디자이너
서비스에 필요한 아이콘 또는 일러스트와 같은
그래픽 요소를 그리는 사람
주로 쓰는 툴
포토샵
결과물 : 아이콘, 일러스트 등 다양한 그래픽 요소
일러스트

22. BXUI인터렉션 Graphic

23. 1. 뭐하는 사람들인가
: UX 디자이너 / 기획자의 일

24. UX디자이너 / 기획자

25. UX 기획자
설계리서치
신규 기획
운영

26. UX 기획자
설계리서치
신규 기획
운영
리서치: FGI, UT, 페르소나, Contextual inquiry 등등
설계: IA, 상세 설계서
운영: 고객문의대응, 서비스 운영, 제휴..우주 삼라만상

27. UX 기획자
설계리서치
신규 기획
운영

28. UX 기획자
설계리서치
신규 기획
운영

29. 2. 그들의 생각
디자이너 : 왜 1px을 옮겨달라고 할까

30. 첫번째 이유:
사용성(가독성)

31. 간격

32. 이 글이 읽기 편하신가요. 불편하신가요. 이걸 실제로 읽어보는 분이 있으실까요. 이게 강연장에서 얼마나 크게 나올지 감이 잘 없네요. 이 글이
읽기 편하신가요. 불편하신가요. 이걸 실제로 읽어보는 분이 있으실까요. 이게 강연장에서 얼마나 크게 나올지 감이 잘 없네요. 이 글이 읽기
편하신가요. 불편하신가요. 이걸 실제로 읽어보는 분이 있으실까요. 이게 강연장에서 얼마나 크게 나올지 감이 잘 없네요.
이 글이 읽기 편하신가요. 불편하신가요. 이걸 실제로 읽어보는 분이
있으실까요. 이게 강연장에서 얼마나 크게 나올지 감이 잘 없네요. 이 글이
읽기 편하신가요. 불편하신가요. 이걸 실제로 읽어보는 분이 있으실까요. 이게
강연장에서 얼마나 크게 나올지 감이 잘 없네요. 이 글이 읽기 편하신가요.
불편하신가요. 이걸 실제로 읽어보는 분이 있으실까요. 이게 강연장에서
얼마나 크게 나올지 감이 잘 없네요.

33. 👀
각도

34. 이 글이 읽기 편하신가요. 불편하신가요.
이걸 실제로 읽어보는 분이 있으실까요.
이 게 강 연 장 에 서 얼 마 나 크 게 나 올 지
감 이 잘 없 네 요 . 이 글 이 읽 기
편하신가요. 불편하신가요. 이걸 실제로
읽 어 보 는 분 이 있 으 실 까 요 . 이 게
강연장에서 얼마나 크게 나올지 감이 잘
없 네 요 . 이 글 이 읽 기 편 하 신 가 요 .
불 편 하 신 가 요 . 이 걸 실 제 로 읽 어 보 는
분 이 있 으 실 까 요 . 이 게 강 연 장 에 서
얼마나 크게 나올지 감이 잘 없네요.
이 글이 읽기 편하신가요. 불편하신가요. 이걸
실제로 읽어보는 분이 있으실까요. 이게
강연장에서 얼마나 크게 나올지 감이 잘 없네요.이
글이 읽기 편하신가요. 불편하신가요. 이걸 실제로
읽어보는 분이 있으실까요. 이게 강연장에서
얼마나 크게 나올지 감이 잘 없네요. 이 글이 읽기
편하신가요. 불편하신가요. 이걸 실제로 읽어보는
분이 있으실까요. 이게 강연장에서 얼마나 크게
나올지감이잘없네요.

35. 이 글이 읽기 편하신가요. 불편하신가요.
이걸 실제로 읽어보는 분이 있으실까요.
이 게 강 연 장 에 서 얼 마 나 크 게 나 올 지
감 이 잘 없 네 요 . 이 글 이 읽 기
편하신가요. 불편하신가요. 이걸 실제로
읽 어 보 는 분 이 있 으 실 까 요 . 이 게
강연장에서 얼마나 크게 나올지 감이 잘
없 네 요 . 이 글 이 읽 기 편 하 신 가 요 .
불 편 하 신 가 요 . 이 걸 실 제 로 읽 어 보 는
분 이 있 으 실 까 요 . 이 게 강 연 장 에 서
얼마나 크게 나올지 감이 잘 없네요.
이 글이 읽기 편하신가요. 불편하신가요. 이걸
실제로 읽어보는 분이 있으실까요. 이게
강연장에서 얼마나 크게 나올지 감이 잘 없네요.이
글이 읽기 편하신가요. 불편하신가요. 이걸 실제로
읽어보는 분이 있으실까요. 이게 강연장에서
얼마나 크게 나올지 감이 잘 없네요. 이 글이 읽기
편하신가요. 불편하신가요. 이걸 실제로 읽어보는
분이 있으실까요. 이게 강연장에서 얼마나 크게
나올지감이잘없네요.

36. 간격을 디자인한다.
= 시선의 흐름을 디자인한다.

37. 간격은 가독성(사용성)에
영향을 줍니다.

38. 두번째 이유:
완성도

39. 이 글이 읽기 편하신가요. 불편하신가요. 이걸
실제로 읽어보는 분이 있으실까요. 이게
강연장에서얼마나크게나올지감이잘없네요.
이걸 실제로 읽어보는 분이 있으실까요. 이게
강연장에서 얼마나 크게 나올지 감이 잘 없네요.
이 글이 읽기 편하신가요. 불편하신가요. 이걸
실제로 읽어보는 분이 있으실까요. 이게
강연장에서 얼마나 크게 나올지 감이 잘 없네요.이
글이 읽기 편하신가요. 불편하신가요. 이걸 실제로
읽어보는 분이 있으실까요. 이게 강연장에서
얼마나크게나올지감이잘없네요.
이글이읽기편하신가요.불편하신가요.

41. 제품(서비스)의 완성도는
작은 디테일이 쌓여서 완성

42. 2. 그들의 생각
UX : UX적으로(??) 해결해달라구요?!

43. ??? : UX적으로 UX에서 해결해주세요.

44. 이미지 출처: https://9gag.com/search?query=gandalf에 글자합성
사람들이 생각하는 UX디자이너.mp4

45. What How

46. What How
문제 정의:
우리가 풀어야 하는 문제는 무엇인가

47. What How
해결방법 찾기:
그 문제를 어떻게 풀것인가

48. UX
Design Develop

49. 3. 어떻게 일하면 좋을까
상세 설계 공유방식에 대한 고민

51. - 수정하는게 너무 큰 일
- 의견 공유/취합 어려움
- 급할때 1쪽 설계 난무 (문서파편화)

53. + 심볼로 해서 이미지 수정은 좀 쉬워짐
+ 제플린으로 코멘트도 달 수 있음
- 모두가 스케치가 익숙하지는 않음
- 텍스트 검색 불편

55. image
issue #345
image
issue #346
의견의견

56. 업데이트 방식
스펙 ver. 1.0
의견1
스펙 ver. 1.1
의견2
스펙 ver. 1.2
스펙 ver. 1.0
의견1
스펙 ver. 1.1
의견1
merge

57. 업데이트 방식
스펙 ver. 1.0
의견1
스펙 ver. 1.1
의견2
스펙 ver. 1.2
스펙 ver. 1.0
의견1
스펙 ver. 1.1
의견1
merge
+ 문서 파편화 해결
+ 검색 용이해짐
+ 히스토리 파악 용이
+ 수정 편함
+ 누구든 쉽게 사용
- 마크다운 가독성

58. 3. 어떻게 일하면 좋을까
커뮤니케이션

59. 왜 안되는지 설명해주시면,
다음에 참고할 수 있어요.
이미지 출처: 죠죠의 기묘한 모험

60. 의견은 자유롭게 !!
하지만 해결방법은 상대에게 맡겨주세요.
이미지 출처: https://9gag.com/gag/aERNpPK/how-designer-deals-client

61. 좋은 관계가 우선

62. 4. 혹시 디자인에
관심이 있으시다면..

63. 🖐 👀<

64. 버튼
버튼
버튼
GNB

65. 비핸스 https://www.behance.net/

66. 드리블 https://dribbble.com/

67. 앱스토어, 플레이스토어

68. 왜 좋은지 생각해보기

69. 왜 이렇게 디자인했는지 생각해보기

70. 따라 만들기

71. 5. 내가 사랑했던 개발자들

72. 들어주셔서 감사합니다.