비행기 설계를 왜 통일 해야 할까? 디자인 시스템을 하는 이유 비행기들이 다 용도가 다르다...어떻게 설계하지? 맥락이 다른 페이지와 패턴 경유지까지 아직 멀었다... 언제 수리하지? 디자인 시스템을 적용하는 시점 엔지니어랑 얘기해서 정비해야하는데...어떻게 수리하지? 디자인 시스템을 적용하는 프로세스 비행기 설계가 바뀐걸 어떻게 알리지? 디자인 시스템의 전파

1. 날고 있는 여러 비행기
넘나 들며 정비하기
박종민
MyRealTrip Design Lead
✈
✈
✈

3. .& ?
✈
"
#
$
%
&
'
(

4. .
Color
Image
Icon
Writing
Typography
Components

5. . .
!"
위키 문서화데일리 스크럼 디자인x개발 회의
# $✨

6. . .
아이콘을 SVG로 변경하는 것이 어떨까 제안 주셨는데요,
예전 페이지에는 새로운 디자인이 적용이 안 된 곳도 있는데요.
이번 기회에 시스템을 제대로 구축해볼까요?
!"! "

7. . .
아이콘 디자인 가이드
Type 시스템 아이콘, 오브젝트 아이콘
Size 10x10 12x12 16x16 20x20 24x24 32x32 48x48 56x56
Color blue-400, blue-500, gray-300, gray-500, gray-700, white
Name ic_arrowdown_md_gray_700.svg

8. . .
Vector
Zeplin Styleguide
Symbol
Move to Library
Dropbox1
2
3
4

9. . .
!
전체를 관리하기 위해서 아이콘 에셋을 서버에서 관리하는 게
더 좋을 것 같아요. 디자이너분들이 드랍박스에 올리면 자동으
로 아마존 S3에 연동되게 구축해보는 건 어떨까요?
"

10. . .
Amazon S3
Client - iOS
Client - iOS
Client - Android
Client - Android
Icon Files
Dropbox Client - Web
Amazon S3

11. . .
!
지금 계시는 분들이나, 새로 들어오실 분들이나
누구나 보고 아이콘을 바로 사용할 수 있게
문서화를 해둬야지!

12. . .
Overview 목적과 전반적인 내용에 대한 요약
How to use 디자인팀, 개발팀이 실제로 사용하는 방법에 대한 내용
How to make 디자인 팀에서 해당 요소를 어떻게 만드는지에 대한 내용
Management 해당 요소가 구체적으로 어떻게 관리되는지에 대해 기록한 내용
디자인 위키

13. . 3 2 (
)
✈
)
"
) ) & )?
#
)
"
$
Today

14. 1
)
✈
)
"
) ) & )
#
)
"
$
Today
. ? 3 (

15. . . .
신 버전 정의한 디자인 시스템으로 디자인 및 개발
개발 시 적용 가능한 요소에만 적용 (ex 아이콘)구 버전

16. Overview 목적과 전반적인 내용에 대한 요약
How to use 디자인팀, 개발팀이 실제로 사용하는 방법에 대한 내용
How to make 디자인 팀에서 해당 요소를 어떻게 만드는지에 대한 내용
Management 해당 요소가 구체적으로 어떻게 관리되는지에 대해 기록한 내용
디자인 위키 Updated 2020. 07. 28.

18. 마이리얼트립의 디자인 시스템은
반복되는 요소를 규격화하는 것이며,
여러 상황에 사용 가능한 요소를
짧게 자주 적용한다.
Summary