아토믹 패턴으로 디자이너와 협업하기

2019년 10월 20일.
GDG devfest 2019 - Seoul에서 발표한 자료입니다.

일관된 사용자 경험을 위해 대두되고 있는 디자인 시스템을
실제 프로젝트에 녹일 수 있도록 도와주는 아토믹 디자인 패턴에 대해서 알아보고자 합니다

Transcript

1. 아토믹 디자인 패턴으로 디자이너와 협업하기
2. 아토믹 디자인 패턴으로 디자이너와 협업하기 ( for junior ) 김나영, Carelabs Goodoc @feel5ny
3. UI 설계는 왜 중요할까 ? 아토믹 패턴이란? 실제 구조를 잡아보자. 기대 효과 1 2 3 4
4. UI 설계는 왜 중요할까 ? 1
5. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 서비스 회사에 다니는 개발자의 시선 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2
6. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 점점 더 마이크로해지는 고객층 micro 서비스 회사에 다니는 개발자의 시선
7. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 서비스 품질 높이기 일관된 서비스의 브랜딩 데이터 기반 개인화 서비스 ኍᶦ 서비스 회사에 다니는 개발자의 시선
8. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 서비스 품질 높이기 일관된 서비스의 브랜딩 데이터 기반 개인화 서비스 ኍᶦ 프론트 개발자는 ? web 프론트 개발자라면?
9. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 복잡성 낮추기 안전한 코드 구현 일관된 UX/UI 구현 프론트 개발자는 ? web 1 2 3 4 프론트 개발자라면?
10. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 복잡성 낮추기 1 프론트 개발자라면?
11. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기 개발자의 숙명 ; 프로젝트 복잡성 낮추기
12. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 - 추가되는 기획 요건 - 협업하는 개발자의 증가 - 업데이트되는 기술스택 - 개발자의 숙명 ; 프로젝트 복잡성 낮추기 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
13. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 고민의 포인트는 비즈니스와 개발환경 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
14. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 물론 ! 중요하지만. 고민의 포인트는 비즈니스와 개발환경 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
15. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 UI 복잡성 증가에 대해선 어디까지 고민해 보았을까? 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
16. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 1. 기준없이 그룹핑 2. 중복 컴포넌트 3. 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
17. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 일관된 UX/UI 구현 3 프론트 개발자라면?
18. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 서비스의 일관된 UX/UI 구현 프론트 개발자라면? / 2. 일관된 UX/UI 구현
19. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 서비스의 일관된 UX/UI 구현 = 브랜딩 프론트 개발자라면? / 2. 일관된 UX/UI 구현
20. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 브랜딩은 디자이너만의 단어? 서비스를 고민하는 사람 모두, 서비스 브랜딩에 일조 하는 것
21. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow
22. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow 기획서 / 와이어프레임 기획자 디자이너
23. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow 기획서 / 와이어프레임 시안 ( 제플린 ) 기획자 디자이너 프론트엔드 개발자
24. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow 기획서 / 와이어프레임 시안 ( 제플린 ) 기획자 디자이너 코드 구현 프론트엔드 개발자
25. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow 기획서 / 와이어프레임 시안 ( 제플린 ) 기획자 디자이너 코드 구현 프론트엔드 개발자
26. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 일관된 UX/UI구현을 위한 Work Flow 기획서 / 와이어프레임 시안 ( 제플린 ) 기획자 디자이너 프론트엔드 개발자 코드 구현
27. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 프론트엔드 개발자 = 서비스의 UI를 최종 구현하는 자.
28. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 프론트엔드 개발자 = 서비스의 UI를 최종 구현하는 자. 디자이너 프론트엔드 개발자
29. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자
30. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자
31. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우?
32. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 1. 중복 개발 보이는 그대로만 구현할 경우?
33. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 “…그냥 넘어가죠” 보이는 그대로만 구현할 경우? 2. 개발 오차의 부채 디자이너
34. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? 3. 디자이너의 의도와 다르게 개발
35. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? 이번 탭은 pill형태로 디자인하자 디자이너 탭인데..버튼모양.. 개발자
36. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? 1. 중복개발 2. 개발 오차 부채 3. 디자이너의 의도와 다르게 개발 복잡성 증가의 원인
37. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? UI레벨도 설계하여 관리하자
38. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 프론트 개발자가 UI를 설계하는 것이 이상적일까?
39. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 프론트 개발자가 UI를 설계하는 것이 이상적일까?
40. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 프론트 개발자가 UI를 설계하는 것이 이상적일까? 디자이너가 설계하는 것이 이상적이다.
41. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 이미 디자인분야에서 진행되고 있는 UI 설계 개념
42. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 이미 디자인분야에서 진행되고 있는 UI 설계 개념 = 디자인 시스템
43. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자인 시스템의 UI 설계 개념 Atomic Design pattern
44. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트엔드 UI 설계 구조 적용 디자인 시스템의 UI 설계 개념 프론트 개발자라면? / 2. 일관된 UX/UI 구현
45. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트엔드 UI 설계 구조 적용 디자인 시스템의 UI 설계 개념 프론트 개발자라면? / 2. 일관된 UX/UI 구현 아토믹 디자인 패턴 Atomic Design Pattern
46. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 기획서 / 와이어프레임 기획자 프론트 개발자라면? / 2. 일관된 UX/UI 구현
47. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 프론트 개발자라면? / 2. 일관된 UX/UI 구현
48. 아토믹 패턴이란? 2
49. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴? 아토믹 패턴이란? A T O M I C P A T T E R N
50. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴? 레고 블록처럼 UI를 작은 단위로 만든 후, 조합하는 개념 아토믹 패턴이란? A T O M I C P A T T E R N
51. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 기본 개념 아토믹 패턴이란? > 출처 invisionapp
52. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 1. Atom Atom 원자 가장 작은 단위의 컴포넌트 - 고유한 속성을 갖음 - 독립성 없음 - 목적성 없음
53. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 1. Atom 1. 디자인의 기본 요소 2. HTML 태그 Atom 원자
54. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 1. Atom 1. 디자인의 기본 요소 - Color / Font / space - Atom 원자
55. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 1. Atom Atom 원자 2. HTML 태그 - Button - input ( text, radio, checkbox, ) - label - BUTTON Assistive text Input text
56. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 2. Molecules Molecules 분자 . Input Ѩ࢝ 원자의 조합 - 하나의 목적만 수행 - 목적성 있음
57. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 3. Organisms Organisms 유기체 여러 목적을 가진 molecules의 조합
58. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 4. Templates Templates 템플릿 여러 목적을 가진 Organisms의 조합
59. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 5. 페이지 Page 페이지 atom, molecule, organism, template의 조합
60. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2
61. 실제 서비스를 보면서 리버스 엔지니어링을 해봅시다.
62. 실제로 적용해보기 3
63. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 디자이너와 함께 1. 컴포넌트 쪼개기 2. 컴포넌트 구조 정의하기
64. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 1. 컴포넌트 쪼개기
65. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 1. 컴포넌트 쪼개기
66. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 네비게이션 tab (pill) 버튼 번역 컴포넌트 실제로 적용해보기 / 1. 컴포넌트 쪼개기
67. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 중간 하단 실제로 적용해보기 / 1. 컴포넌트 쪼개기
68. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
69. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
70. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
71. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 버튼 / 아이콘 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
72. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 로고 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
73. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프로필 썸네일 상단 GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
74. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 tab / pill / 아이콘 + text GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
75. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 버튼 / 아이콘 로고 프로필 썸네일 상단 tab / pill / 아이콘 + text GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
76. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 Tabs / pill GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
77. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 상단 GNB GNB / page header 실제로 적용해보기 / 1. 컴포넌트 쪼개기
78. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
79. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
80. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 버튼 / 아이콘 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
81. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 guide / 글자수 표시 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
82. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 체크박스(토글) / 아이콘 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
83. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 Select / 아이콘 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
84. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 버튼/ 텍스트 / small translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
85. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 guide / 글자수 표시 체크박스(토글) / 아이콘 버튼/ 텍스트 / small Select / 아이콘 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
86. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 TextArea translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
87. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 tab / basic translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
88. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 글자 박스 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
89. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
90. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 녹음버튼 사운드 버튼 복사 버튼 편집 버튼 공유 버튼 전환 버튼 실제로 적용해보기 / 1. 컴포넌트 쪼개기
91. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component TextareaWithDelete 실제로 적용해보기 / 1. 컴포넌트 쪼개기
92. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component tabs / baisc 실제로 적용해보기 / 1. 컴포넌트 쪼개기
93. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component Like checkbox 실제로 적용해보기 / 1. 컴포넌트 쪼개기
94. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 녹음버튼 사운드 버튼 복사 버튼 편집 버튼 공유 버튼 전환 버튼 Like checkbox TextareaWithDelete tabs / baisc 실제로 적용해보기 / 1. 컴포넌트 쪼개기
95. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
96. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 전 실제로 적용해보기 / 1. 컴포넌트 쪼개기
97. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 후 실제로 적용해보기 / 1. 컴포넌트 쪼개기
98. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 언어선택 실제로 적용해보기 / 1. 컴포넌트 쪼개기
99. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 footer 실제로 적용해보기 / 1. 컴포넌트 쪼개기
100. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 전 번역 후 번역 언어선택 번역 footer 실제로 적용해보기 / 1. 컴포넌트 쪼개기
101. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 번역 실제로 적용해보기 / 1. 컴포넌트 쪼개기
102. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 실제로 적용해보기 / 1. 컴포넌트 쪼개기
103. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 실제로 적용해보기 / 1. 컴포넌트 쪼개기
104. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 토글 기능 버튼 기능 실제로 적용해보기 / 1. 컴포넌트 쪼개기
105. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 실제로 적용해보기 / 1. 컴포넌트 쪼개기
106. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 아이콘 / 원 실제로 적용해보기 / 1. 컴포넌트 쪼개기
107. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 라벨 / 체크박스 실제로 적용해보기 / 1. 컴포넌트 쪼개기
108. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 체크박스 / 원+아이콘+라벨 실제로 적용해보기 / 1. 컴포넌트 쪼개기
109. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 버튼 / 원+아이콘+라벨 실제로 적용해보기 / 1. 컴포넌트 쪼개기
110. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 아이콘 / 원 버튼 / 원+아이콘+라벨 라벨 / 체크박스 체크박스 / 원+아이콘+라벨 실제로 적용해보기 / 1. 컴포넌트 쪼개기
111. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons trigger 버튼 실제로 적용해보기 / 1. 컴포넌트 쪼개기
112. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons outlink 버튼 실제로 적용해보기 / 1. 컴포넌트 쪼개기
113. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons outlink 버튼 trigger 버튼 실제로 적용해보기 / 1. 컴포넌트 쪼개기
114. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 번역 sub 실제로 적용해보기 / 1. 컴포넌트 쪼개기
115. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 쪼갠 컴포넌트를 정리하여 구조를 정의해보면
116. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 Atom 1.Button - Icon - Text - outlink 2.Checkbox - Icon - Circle - Checked - Unchecked 3.Label - Checkbox - Checked - Unchecked 4.Textarea 5.Element - Big textBox - Middle textBox - Small textBox 6.Icon 26가지 7.Tab - Basic - Active - Unactive - Pill - Active - unActive 7.Thumbnail 8.Logo - Basic
117. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 Molecules 1.Button - editMode - Copy - Share - Edit - soundOn - Record - Menu - exchangeLanguage - Circle+icon 2.Tabs - Basic - Pill 3.Checkbox - circle+icon - likeToggle - Star 4.Textarea - Width - Delete
118. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 Organisms 1.Translate - Before - After - Header - Footer - subButtons 2. GNB Templates 1.Translate Pages 1.Translate
119. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 정의한 구조를 실제로 적용해보면
120. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
121. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
122. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 컴포넌트 베이스 작업 실제로 적용해보기
123. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 구조를 이름으로 정의 실제로 적용해보기
124. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
125. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 Export Symbol to component 실제로 적용해보기
126. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
127. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
128. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
129. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
130. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
131. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
132. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
133. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 공통된 속성은 d.ts로 정의 각 컴포넌트별로 상속
134. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기
135. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
136. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 구현물 리뷰 ( storybook ) 실제로 적용해보기
137. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 디자이너의 컴포넌트 시안을 개발자 코드와 함께 실제로 적용해보기
138. 기대 효과 4
139. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 1. 코드레벨에서 UI의 복잡성을 낮춤 Before After
140. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 2. 디자이너와의 빠른 의사소통 Sketch Zeplin Code
141. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 2. 디자이너와의 빠른 의사소통 Sketch Zeplin Code
142. 아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 3. UI개발의 확장성 > 버튼의 확장성
143. 디자이너 개발자
145. QnA 이메일 질문은 feel5.nayoung@gmail.com으로 부탁드립니다
146. 감사합니다.