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

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

D80088e6489118ed798d4fb6b4c8bef0?s=47 Joy Kim
October 20, 2019

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

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

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

D80088e6489118ed798d4fb6b4c8bef0?s=128

Joy Kim

October 20, 2019
Tweet

More Decks by Joy Kim

Other Decks in Programming

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. 디자이너 개발자

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

  146. 감사합니다.