Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Joy Kim
October 20, 2019

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

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

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

Joy Kim

October 20, 2019
Tweet

More Decks by Joy Kim

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 아토믹 패턴이란?
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 실제로
    적용해보기
    3

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  138. 기대
    효과
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  143. 디자이너 개발자

    View full-size slide

  144. QnA
    이메일 질문은
    [email protected]으로 부탁드립니다

    View full-size slide

  145. 감사합니다.

    View full-size slide