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. 아토믹 디자인 패턴으로 디자이너와 협업하기

  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. 감사합니다.