디자인 시스템 반영기 / adiOS / 2021 Oct.

2. Tim Guk
국윤수
매스프레소
QANDA iOS App 개발
유쾌하고 명료하게.

3. Tim Guk
디자인 시스템이 필요하다는 것.
디자인 규격을 일원화

4. 디자인 시스템
다 때가 있다.
• 여러 서비스(어플리케이션)
• 맵 + 웹툰 + 페이 + …
• 여러 환경에서 작동
• 폰 + 워치 + PC + TV

5. 개발 결정 배경
현재 상황을 톺아볼 시간.
• 현재 서비스중인 앱 2개 + 추후 추가 될 가능성
• 5년 넘게 많은 기능들이 개발됨
• 디자인 시스템 부재로 많은 문제 발생

6. 문제점
이게 바로 문제.
• 결과물들의 통일성 저하
• 작업자
• 작업된 시기
• 자유로운 디자인
• 같은 역할을 하는 제각각의 View / Asset
• 중복 Asset 증가

7. 디자인 시스템 구축

8. 디자인 시스템이 추구하는 방향
미래를 더욱 쉽게.
• 현재 사태 파악 및 가이드라인 정리
• 디자이너용 가이드라인 → 디자인 + 개발 가이드라인
• 일괄 적용 → 점진적 개선
• 자유도 → 생산성

9. import QDSKit
QANDA Design System

10. QDSKit 요구 Specs
문제가 문제 되지 않게.
• 동일 규격
• 버전 관리
• Grouped View Debugging

11. Swift Package.
오직 애플의 손길로만.
• Carthage는 라이브러리 내부를 디버깅하기 어려움.
• Color / Font / Icon Asset
• Grouped View (TextField, Toast)

12. 샘플은 심플하게.
Sample App
• 모두가 볼 수 있게
• TestFlight 배포

13. 결과물

14. 결과물 - Typography
낮아진 자유도. 높아진 생산성.

15. 결과물 - Typography
낮아진 자유도. 높아진 생산성.
QDS.Font.b3
UIFont.systemFont(ofSize: 16,
weight: .regular)

16. 결과물 - Icons
낮아진 자유도. 높아진 생산성.
QDS.Icon.controller20
QDS.Icon.sort20
QDS.Icon.plusFilled20
. . .

17. 결과물 - TextField
낮아진 자유도. 높아진 생산성.

18. 1 Depth ViewControllers
첫 인상. 새로운 인상.
• 각 탭의 첫 페이지에 QDS 적용

19. Rules

20. 디자인 시스템 적용 룰
마치 보이스카우트처럼.
• ‘언제나 처음 왔을 때보다 깨끗하게 해놓고 캠핑장을 떠날 것’
• 공통 Asset 적극 활용
• 같은 역할의 중복된 리소스 제거

21. 디자인 시스템 적용 룰
점진적이고, 적극적으로.
• 한 번에 다 하려고 하지 않기.
• 적극적인 커뮤니케이션 필요.

22. 앞으로의 계획
찬란한 미래와의 조우를 위해.
• 우선순위별로 기능 확장
• 규격화하고 실제 프로젝트에 적용하는 과정
• 디자인 결과물과 샘플앱의 외부 공유 (언젠가)

23. - Steve Jobs
- 품질은 양보다 중요합니다.