[UI/UX]패스트캠퍼스 챌린지 6일차

오늘은 썸네일이 없어요..

왜냐면 친구집 올라와서 인상을 듣기 떄문이죻ㅎㅎㅎ

설날이여서 친구집 놀러왔습니당 :)

 

오늘 들을 주제는! "디자인 데이터 전달"

 

---

1.  디자인 핸드오프

- 유아이(영어가 안되네요 타자가. ^_^) 디자인이 개발로 구현하는 단계에 도달됐을 때 필요

- 디자인 데이터를 개발자가 이해할 수 잇는 데이터로 변환하는 과정

- 개발 프로세스에 따라 디자인 핸드오프의 시점과 방법이 다름!

 

# 디자인 구현 요소에 개발자가 필요한 요소들

: 나한테 아주 꼭 필요한 내용들이였다! 맨날 그냥 제플린에 띡 넘기면서 올리는데 생각없이 줬다는 생각에

개발자님들에게도 살짝 미안해졌다 ^^

 

* 좌표, 크기, 컬러, 플로우, 레이아웃(화면이 커졌을 때 어떻게 되는지/푸터에 대한 정보), 에셋(이미지/아이콘파일들), 인터렉션

, 코멘트

 

#핸드오프가 일어나는 시점

(옛날에는 피피티로했다는 충격적인 사실....)

 

*폭포수 방식이라면 디자인 핸드오프 발생 시점 명확

문제정의 - 디자인 - 개발 - 검증 

(디자인에서 개발로 넘어갈 때 생김)

 

* 대부분의 회사 애자일 방식의 핸드오프

: 돌고 돈다. 핸드오프가 돌고 돌고 돈당~~

 

---

2. 어떻게 디자인 데이터 전달하는가

- 제플린, 피그마, 앱스트랙트 스케치, 인지적으로 인스펙트, 엑스디, 스케치

 

개발자들은 피그미보다 제플린을 더 좋아한다....!

신기했다. 당연히 피그미일절 알았는데 제플린을 좋아한다니 감동이야

 

저는 항상 제플린에 올렸거든요 ㅎㅎ

 

**플로우 가이드 -> 제플린이나. 피그미가 어려워서 오버플로우라는 사이트를 추천해주셨다.

제플린만 활용할 게 아니라 오버플로우에서 개발자에게 소통을 잘하는 것도 중요한 것 같다.

왜냐면 개발자들이 이해하기 쉽게 해줘야 좋은 결과물이 나오기떄문

 

**레이아웃 가이드 : 예상하기 어려운 거 써주써기

 

**인터렉션 가이드 -> 컴포넌트 별 상태, 로티피엔지시퀀스에니메이트애니메이션 데이터 전달

 

**프로토타이핑 결과물 - 필요한 제스처 설명 전달해주기

 

 

---

3. 제플린 사용법

제플린 맨날 혼자 걍 알아서 올리기만하고 굳이 사용법을 본 적은 없었는데 신기하다 ㅋㅋㅋ

나도 모르는 기능들이 많았고 활용을 너무 잘 못했던가 같았다..

이걸 먼저 알았다면 더 좋은 소통이 있었을텐데 아쉬웠땅 ㅠㅠ

 

근데 이것도 스케치로 강의해주셔서 불편했다..

난 스케치를 쓸일이 없기 때문에 ㅠ_ㅠ

 

1) 프로젝트에서 브랜드코어 올리기 

2) 스타일가이드. 비워주기 

3)프로젝트에서 컴포넌트 만들어주기 

 

*웹은 완만해서 아이콘 피엔지가 아니라 에스브이지로 작업한다.

 

##스타일가이드 활용법

이것도 스케치로 해주셔서...왕따당하는 느낌....ㅋㅋㅋㅋㅋ

난 그 틀이 없는데......활용법을 스케치로 알려주시면..ㅠ

 

- 브랜드코어를 중심으로 아이오에스와 안드로이드 나눠서 구분해주기

- 텍스트와 컬러도 브랜드코어 중심으로 하단 메뉴들 물려받음

 

1. 프로젝트에 작업을 올리기

2. 스타일 가이드에 올린 프로젝트를 해당하는 컴포넌트 연결(링크) 시키기

 

 

---

4. 마블은 어떤 용도로 활용해야 하는가요

*핸드오프 이전의 커뮤니케이션

피엠피오기획자 / 디자이너 / 개발자

- 요즘에는 피그마 자체에서 의사소통 가능!

- 스케치는 클라우드에 올려서 브라우저에서 소통 가능!

 

마블이 뭔가했더니 또 그놈의 스케치를 도와주는 툴이였다 ^_^

그래 난 스케치 쓸일 없으니까 이 강의는 패쓰 하겠다.

 

---

5. 개발된 결과물의 검수 어떻게 해야할까용?

내가 이 강의를 신청한 거는 피그미를 배우기 위해서도 있었지만

개발자랑 부딪히는 일도 많이 생기고(물론 그 개발자의 개발 실력은 0입니다 0) 해결방법을 몰라 답답(사수도 없음)

했는데 이 강의가 그런 부분들을 잘 설명해주셨다.

 

*유아이 디버깅은 나의 몫이다..

- 디자인 결과물의 개발된 결과물의 차이 찾아내고 바로잡는 과정

 

*웹 브라우저의 경우->크롬이나 비쥬얼인스펙터 사용

 

*안드로이드 오에스의 경우 -> 에이피케이(안드로이드 사용 앱 파일)을 받아서 설치해서 사용

 

*아이오에스의 경우 -> 테스트 플레이트를 통해 검수

 

* 사전 협의된 스크린 사이즈가 중요! -> 디자인 결과물의 좌표, 크기가 개발결과물과 동일하게 사전에 준비해야지..!

 

* 에이치티엠일 씨에스에스(영어가 안되서 불편..^_^)언어 꼭 알아주기!

: 대학다닐때 대충 듣긴 해서 뭔지 알긴하는데...좀 외워놔야겠당

 

 

인증샷 하단에 남깁니다..

이론 강의에서 실습은 찍을게 없어서,,

남자친구 집에와서 인강 열심히 듣는 저와,,,처음으로 유용하게 쓰는 저의 블루투스 키보드..!

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.