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

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

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

Transcript

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

   View Slide

2. 아토믹 디자인 패턴으로
   디자이너와 협업하기
   ( for junior )
   김나영, Carelabs Goodoc
   @feel5ny
   

   View Slide

3. 
   UI 설계는 왜 중요할까 ?
   아토믹 패턴이란?
   실제 구조를 잡아보자.
   기대 효과
   1
   2
   3
   4
   

   View Slide

4. UI 설계는
   왜 중요할까 ?
   1
   

   View Slide

5. 아토믹 디자인 패턴으로 디자이너와 협업하기
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   서비스 회사에 다니는
   개발자의 시선
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   

   View Slide

6. 아토믹 디자인 패턴으로 디자이너와 협업하기
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   점점 더
   마이크로해지는
   고객층
   micro
   서비스 회사에 다니는 개발자의 시선
   

   View Slide

7. 아토믹 디자인 패턴으로 디자이너와 협업하기
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   서비스 품질 높이기
   일관된 서비스의 브랜딩
   데이터 기반 개인화 서비스
   ኍᶦ
   서비스 회사에 다니는 개발자의 시선
   

   View Slide

8. 아토믹 디자인 패턴으로 디자이너와 협업하기
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   서비스 품질 높이기
   일관된 서비스의 브랜딩
   데이터 기반 개인화 서비스
   ኍᶦ
   프론트
   개발자는 ?
   web
   프론트 개발자라면?
   

   View Slide

9. 아토믹 디자인 패턴으로 디자이너와 협업하기
   UI 설계는
   왜 중요할까?
   1 실제로
   적용해보기
   3 기대
   효과
   4
   아토믹
   디자인이란
   2
   복잡성 낮추기
   안전한 코드 구현
   일관된 UX/UI 구현
   프론트
   개발자는 ?
   web
   1
   2
   3
   4
   프론트 개발자라면?
   

   View Slide

10. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    복잡성 낮추기
    1
    프론트 개발자라면?
    

    View Slide

11. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    개발자의 숙명 ;
    프로젝트
    복잡성 낮추기
    

    View Slide

12. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    - 추가되는 기획 요건
    - 협업하는 개발자의 증가
    - 업데이트되는 기술스택
    -
    개발자의 숙명 ;
    프로젝트
    복잡성 낮추기
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    

    View Slide

13. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    고민의 포인트는
    비즈니스와
    개발환경
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    

    View Slide

14. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    물론 !
    중요하지만.
    고민의 포인트는
    비즈니스와
    개발환경
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    

    View Slide

15. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    UI 복잡성 증가에 대해선
    어디까지 고민해 보았을까?
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    

    View Slide

16. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    1. 기준없이 그룹핑
    2. 중복 컴포넌트
    3.
    프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
    

    View Slide

17. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    일관된 UX/UI 구현
    3
    프론트 개발자라면?
    

    View Slide

18. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    서비스의
    일관된 UX/UI 구현
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    

    View Slide

19. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    서비스의
    일관된 UX/UI 구현
    = 브랜딩
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    

    View Slide

20. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    브랜딩은 디자이너만의 단어?
    서비스를 고민하는 사람 모두,
    서비스 브랜딩에 일조 하는 것
    
    

    View Slide

21. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    

    View Slide

22. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    기획서 /
    와이어프레임
    기획자 디자이너
    

    View Slide

23. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    기획서 /
    와이어프레임
    시안
    ( 제플린 )
    기획자 디자이너
    프론트엔드
    개발자
    

    View Slide

24. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    기획서 /
    와이어프레임
    시안
    ( 제플린 )
    기획자 디자이너
    코드
    구현
    프론트엔드
    개발자
    

    View Slide

25. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    기획서 /
    와이어프레임
    시안
    ( 제플린 )
    기획자 디자이너
    코드
    구현
    프론트엔드
    개발자
    

    View Slide

26. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    일관된 UX/UI구현을 위한
    Work Flow
    기획서 /
    와이어프레임
    시안
    ( 제플린 )
    기획자 디자이너
    프론트엔드
    개발자
    코드
    구현
    

    View Slide

27. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    프론트엔드 개발자
    =
    서비스의 UI를
    최종 구현하는 자.
    

    View Slide

28. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    프론트엔드 개발자
    =
    서비스의 UI를
    최종 구현하는 자.
    디자이너
    프론트엔드
    개발자
    

    View Slide

29. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    

    View Slide

30. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    

    View Slide

31. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    보이는 그대로만
    구현할 경우?
    

    View Slide

32. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    1. 중복 개발
    보이는 그대로만 구현할 경우?
    

    View Slide

33. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    “…그냥 넘어가죠”
    보이는 그대로만 구현할 경우?
    2. 개발 오차의 부채
    디자이너
    

    View Slide

34. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    보이는 그대로만 구현할 경우?
    3. 디자이너의 의도와
    다르게 개발
    

    View Slide

35. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    보이는 그대로만 구현할 경우?
    이번 탭은 pill형태로
    디자인하자
    디자이너
    탭인데..버튼모양..
    개발자
    

    View Slide

36. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    보이는 그대로만 구현할 경우?
    1. 중복개발
    2. 개발 오차 부채
    3. 디자이너의 의도와 다르게 개발
    복잡성 증가의 원인
    

    View Slide

37. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자이너
    프론트엔드
    개발자
    보이는 그대로만 구현할 경우?
    UI레벨도
    설계하여 관리하자
    

    View Slide

38. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    프론트 개발자가
    UI를 설계하는 것이
    이상적일까?
    

    View Slide

39. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    프론트 개발자가
    UI를 설계하는 것이
    이상적일까?
    
    

    View Slide

40. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    프론트 개발자가
    UI를 설계하는 것이
    이상적일까?
    디자이너가
    설계하는 것이
    이상적이다.
    

    View Slide

41. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    이미 디자인분야에서
    진행되고 있는 UI 설계 개념
    

    View Slide

42. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    이미 디자인분야에서
    진행되고 있는 UI 설계 개념
    = 디자인 시스템
    

    View Slide

43. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    디자인 시스템의
    UI 설계 개념
    Atomic
    Design pattern
    

    View Slide

44. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트엔드
    UI 설계 구조 적용
    디자인 시스템의
    UI 설계 개념
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    

    View Slide

45. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프론트엔드
    UI 설계 구조 적용
    디자인 시스템의
    UI 설계 개념
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    아토믹 디자인 패턴
    Atomic Design Pattern
    

    View Slide

46. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    시안
    ( 제플린 )
    디자이너
    프론트엔드
    개발자
    코드
    구현
    기획서 /
    와이어프레임
    기획자
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    

    View Slide

47. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    시안
    ( 제플린 )
    디자이너
    프론트엔드
    개발자
    코드
    구현
    아토믹 디자인 패턴 Atomic Design Pattern
    기획서 /
    와이어프레임
    기획자
    프론트 개발자라면? / 2. 일관된 UX/UI 구현
    

    View Slide

48. 아토믹 패턴이란?
    2
    

    View Slide

49. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴?
    아토믹 패턴이란?
    A T O M I C P A T T E R N
    

    View Slide

50. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴?
    레고 블록처럼
    UI를 작은 단위로 만든 후,
    조합하는 개념
    아토믹 패턴이란?
    A T O M I C P A T T E R N
    

    View Slide

51. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    기본 개념
    아토믹 패턴이란?
    > 출처 invisionapp
    

    View Slide

52. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 1. Atom
    Atom 원자
    가장 작은 단위의 컴포넌트
    - 고유한 속성을 갖음
    - 독립성 없음
    - 목적성 없음
    

    View Slide

53. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 1. Atom
    1. 디자인의 기본 요소
    2. HTML 태그
    Atom 원자
    

    View Slide

54. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 1. Atom
    1. 디자인의 기본 요소
    - Color / Font / space
    -
    Atom 원자
    

    View Slide

55. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 1. Atom
    Atom 원자
    2. HTML 태그
    - Button
    - input ( text, radio, checkbox, )
    - label
    -
    BUTTON
    Assistive text
    Input text
    

    View Slide

56. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 2. Molecules
    Molecules 분자
    .
    Input Ѩ࢝
    원자의 조합
    - 하나의 목적만 수행
    - 목적성 있음
    

    View Slide

57. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 3. Organisms
    Organisms 유기체
    여러 목적을 가진
    molecules의 조합
    

    View Slide

58. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 4. Templates
    Templates 템플릿
    여러 목적을 가진
    Organisms의 조합
    

    View Slide

59. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    아토믹 패턴이란? / 5. 페이지
    Page 페이지
    atom, molecule, organism, template의 조합
    

    View Slide

60. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    

    View Slide

61. 실제 서비스를 보면서
    리버스 엔지니어링을 해봅시다.
    

    View Slide

62. 실제로
    적용해보기
    3
    

    View Slide

63. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    실제로 적용해보기
    디자이너와 함께
    1. 컴포넌트 쪼개기
    2. 컴포넌트 구조 정의하기
    

    View Slide

64. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

65. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

66. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    네비게이션
    tab (pill) 버튼
    번역 컴포넌트
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

67. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단
    중간
    하단
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

68. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

69. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

70. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

71. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    버튼 / 아이콘
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

72. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    로고
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

73. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    프로필 썸네일
    상단 GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

74. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단
    tab / pill / 아이콘 + text
    GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

75. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    버튼 / 아이콘
    로고 프로필 썸네일
    상단
    tab / pill / 아이콘 + text
    GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

76. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단
    Tabs / pill
    GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

77. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    상단
    GNB
    GNB / page header
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

78. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

79. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

80. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    버튼 / 아이콘
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

81. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    guide / 글자수 표시
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

82. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    체크박스(토글) / 아이콘
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

83. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    Select / 아이콘
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

84. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    버튼/ 텍스트 / small
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

85. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    guide / 글자수 표시 체크박스(토글) / 아이콘
    버튼/ 텍스트 / small
    Select / 아이콘
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

86. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    TextArea
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

87. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    tab / basic
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

88. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간
    글자 박스
    translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

89. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

90. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    녹음버튼
    사운드 버튼
    복사 버튼
    편집 버튼
    공유 버튼
    전환 버튼
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

91. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    TextareaWithDelete
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

92. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    tabs / baisc
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

93. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    Like checkbox
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

94. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    녹음버튼
    사운드 버튼
    복사 버튼
    편집 버튼
    공유 버튼
    전환 버튼 Like checkbox
    TextareaWithDelete
    tabs / baisc
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

95. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

96. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    번역 전
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

97. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    번역 후
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

98. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    번역 언어선택
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

99. 아토믹 디자인 패턴으로 디자이너와 협업하기
    UI 설계는
    왜 중요할까?
    1 실제로
    적용해보기
    3 기대
    효과
    4
    아토믹
    디자인이란
    2
    중간 translate component
    번역 footer
    실제로 적용해보기 / 1. 컴포넌트 쪼개기
    

    View Slide

100. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     중간 translate component
     번역 전 번역 후
     번역 언어선택
     번역 footer
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

101. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     중간 translate component
     번역
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

102. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

103. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

104. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     토글 기능 버튼 기능
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

105. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

106. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     아이콘 / 원
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

107. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     라벨 / 체크박스
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

108. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     체크박스 / 원+아이콘+라벨
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

109. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     버튼 / 원+아이콘+라벨
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

110. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     아이콘 / 원
     버튼 / 원+아이콘+라벨
     라벨 / 체크박스
     체크박스 / 원+아이콘+라벨
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

111. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     trigger 버튼
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

112. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     outlink 버튼
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

113. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     outlink 버튼
     trigger 버튼
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

114. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     하단 Sub buttons
     번역 sub
     실제로 적용해보기 / 1. 컴포넌트 쪼개기
     

     View Slide

115. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기 / 2. 컴포넌트 구조 정의하기
     쪼갠 컴포넌트를 정리하여
     구조를 정의해보면
     

     View Slide

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
     

     View Slide

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
     

     View Slide

118. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기 / 2. 컴포넌트 구조 정의하기
     Organisms
     1.Translate
     - Before
     - After
     - Header
     - Footer
     - subButtons
     2. GNB
     Templates
     1.Translate
     Pages
     1.Translate
     

     View Slide

119. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기 / 2. 컴포넌트 구조 정의하기
     정의한 구조를
     실제로 적용해보면
     

     View Slide

120. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

121. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

122. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     컴포넌트 베이스 작업
     실제로 적용해보기
     

     View Slide

123. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     구조를 이름으로 정의
     실제로 적용해보기
     

     View Slide

124. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

125. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     Export
     Symbol to
     component
     실제로 적용해보기
     

     View Slide

126. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

127. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

128. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

129. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

130. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

131. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

132. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

133. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     공통된 속성은 d.ts로 정의
     각 컴포넌트별로 상속
     

     View Slide

134. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     실제로 적용해보기
     

     View Slide

135. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     실제로 적용해보기
     

     View Slide

136. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     시안
     ( 제플린 )
     디자이너
     프론트엔드
     개발자
     코드
     구현
     아토믹 디자인 패턴 Atomic Design Pattern
     기획서 /
     와이어프레임
     기획자
     구현물 리뷰
     ( storybook )
     실제로 적용해보기
     

     View Slide

137. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     디자이너의 컴포넌트 시안을
     개발자 코드와 함께
     실제로 적용해보기
     

     View Slide

138. 기대
     효과
     4
     

     View Slide

139. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     1. 코드레벨에서 UI의 복잡성을 낮춤
     Before After
     

     View Slide

140. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     2. 디자이너와의 빠른 의사소통
     Sketch Zeplin Code
     

     View Slide

141. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     2. 디자이너와의 빠른 의사소통
     Sketch Zeplin Code
     

     View Slide

142. 아토믹 디자인 패턴으로 디자이너와 협업하기
     UI 설계는
     왜 중요할까?
     1 실제로
     적용해보기
     3 기대
     효과
     4
     아토믹
     디자인이란
     2
     3. UI개발의 확장성
     > 버튼의 확장성
     

     View Slide

143. 디자이너 개발자
     

     View Slide

144. View Slide

145. QnA
     이메일 질문은
     feel5.nayoung@gmail.com으로 부탁드립니다
     

     View Slide

146. 감사합니다.
     

     View Slide