아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 - 추가되는 기획 요건 - 협업하는 개발자의 증가 - 업데이트되는 기술스택 - 개발자의 숙명 ; 프로젝트 복잡성 낮추기 프론트 개발자라면? / 1. 프로젝트 복잡성 낮추기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 브랜딩은 디자이너만의 단어? 서비스를 고민하는 사람 모두, 서비스 브랜딩에 일조 하는 것
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? 3. 디자이너의 의도와 다르게 개발
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트 개발자라면? / 2. 일관된 UX/UI 구현 디자이너 프론트엔드 개발자 보이는 그대로만 구현할 경우? 1. 중복개발 2. 개발 오차 부채 3. 디자이너의 의도와 다르게 개발 복잡성 증가의 원인
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 프론트엔드 UI 설계 구조 적용 디자인 시스템의 UI 설계 개념 프론트 개발자라면? / 2. 일관된 UX/UI 구현 아토믹 디자인 패턴 Atomic Design Pattern
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 아토믹 패턴이란? / 1. Atom Atom 원자 2. HTML 태그 - Button - input ( text, radio, checkbox, ) - label - BUTTON Assistive text Input text
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 guide / 글자수 표시 체크박스(토글) / 아이콘 버튼/ 텍스트 / small Select / 아이콘 translate component 실제로 적용해보기 / 1. 컴포넌트 쪼개기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 녹음버튼 사운드 버튼 복사 버튼 편집 버튼 공유 버튼 전환 버튼 실제로 적용해보기 / 1. 컴포넌트 쪼개기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 중간 translate component 녹음버튼 사운드 버튼 복사 버튼 편집 버튼 공유 버튼 전환 버튼 Like checkbox TextareaWithDelete tabs / baisc 실제로 적용해보기 / 1. 컴포넌트 쪼개기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 하단 Sub buttons 아이콘 / 원 버튼 / 원+아이콘+라벨 라벨 / 체크박스 체크박스 / 원+아이콘+라벨 실제로 적용해보기 / 1. 컴포넌트 쪼개기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 실제로 적용해보기 / 2. 컴포넌트 구조 정의하기 Organisms 1.Translate - Before - After - Header - Footer - subButtons 2. GNB Templates 1.Translate Pages 1.Translate
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기
아토믹 디자인 패턴으로 디자이너와 협업하기 UI 설계는 왜 중요할까? 1 실제로 적용해보기 3 기대 효과 4 아토믹 디자인이란 2 시안 ( 제플린 ) 디자이너 프론트엔드 개발자 코드 구현 아토믹 디자인 패턴 Atomic Design Pattern 기획서 / 와이어프레임 기획자 실제로 적용해보기