모바일 개발자가 원하는 디자인 가이드를 위한 설명

1. 모바일 개발자가 원하는
디자인 가이드
(a.k.a 내가 원하는 디자인 가이드)
유덕현

2. 시작하면서
• 이문서는 아주 주관적인 내용입니다.
특히 저의 개인적인 경험과 생각이 아주 많이 베어 있습니다.
• 디자인 가이드에는 정답이 없습니다.
• FM은 있지만 그렇게 하는 사람 별로 없습니다.(저도 FM싫어함)
• 일반적으로 서로 절대 이해할 수 없는 영역이 존재합니다.
=> 고로 지속적인 대화와 친밀한 관계가 필요합니다.
• 발표 중 질문은 수시로! 하고 싶으실때 부담없이 하세요~

3. 슬픈 현실… 우리모두 화이팅

4. 개발자 say : Px ? Pixel !?! (사실 알아요)

5. 디자이너 say : PT!? DIP !?!?
• iOS, Android 에서 사용하는 추상화된 단위

7. PT

8. DP

9. FM
• 화면별(iOS:4개 Android: 많이 ^^;)가이드 문서 작성
• 화면 밀도별 이미지 각각 iOS 3set, Android 6set (미래에 더 늘어날수도…)
• 기타 등등…
현실적으로 불가능하고 개발자도 각각의 레이아웃을 나누어 작업해야해서 레이
아웃 수정시 어마어마한 공수가 들어감( 이렇게 하는 곳은 없다고 거의…장담..)
많은 곳에서 이 룰은 지켜짐 특히 애플, 구글에서 출시하는 앱들.. 개인적으로 싫
어하는 이유는 이미지 하나 교체시 여러 개의 파일을 주고받고 또 그걸 프로젝트
에 적용하는 과정에서 빵꾸날 확률이 있음.. (경험)

10. 그럼 넌 어떻게 했었어요?
• 기준해상도를 만들어서 작업했어요
• 정말 특정단말에서 특정 화면이 못봐주겠다!!
방법1(추천) 방법2
iOS : 375x667 (6 or 7)
Android : 360x640(갤럭시 친구들)
iOS,Android 모두
360x640(갤럭시 친구들로 퉁)
언제든지 말해주세요~ iOS/Android 모두 특정 화면만 따로 해상도별로 작업이 가능합니다.~
많지도 않고 화면 몇 개 세부 조정 해 달라는데 싫다고 하면 그건 개발자가 귀찮은겁니다(100%)
갈궈주세요(ex: 그거 별거 아닌거 알아요)
But 너무 많으면 파편화가 일어나서 나중에 유지보수가 어려울 수도 있다는 두려움에 싫다고 할
수 도 있습니다. 그건 조금 이해해 주세요

11. 그럼 넌 어떻게 했었어요?part.2
• 한가지 해상도로 작업을 했습니다.
• 1280 x 720 (xxhdpi, 2@) 기준의 파일로 낮은해상도는 알아서 리사이징, 높은 해
상도에서 육안으로 심하게 깨지지 않으면 그냥 사용!
• 저사양 단말에서 이미지가 너무 클 경우에는 앱이 뻗는 현상 경험, 높은 해상도
의 단말에서 복잡도가 높은 이미지의 경우 흐릿하게 보이는 경우가 있음
• 위 상황의 경우 해당 이미지만 해상도별로 작업을 해서 관리
• 지금 생각으로는 조금 잘못된 방법이였다 생각됨..

12. Zeplin

13. Vector
• 최근 앱 디자인 트렌드가 머테리얼과 미니멀함. 따라서 단색 위주의 벡터 이미
지는 좋은 png 파일 대체재
• 현재 iOS/Android 모두 벡터 이미지(SVG, PSD) 파일 지원… 하는걸로 알고있어요..
• 장점 : 하나의 파일로 모든 해상도 대응(오예!!)
• 단점 : 제약이 존재함(링크)

14. 컴포넌트의 속성
• 위치와 크기는 필수요소!!!!
(x, y)
(width, height)

15. •가로 방향으로 가운데정렬
•세로방향으로 가운데 정렬
•(w: 50, h: 50)
•가로 방향으로 가운데정렬
•세로방향으로 가운데 정렬
•(w: 화면 의 30%, h: =w)
•(x:30, y: 60) (w: 50, h: 50)

16. 물리적 위치와 크기보다 중요한건 관계
그 관계를 맺어주는건 제약(Constraint)!!

17. 제약(Constraint)의 기본
• 제약이 해석되면 (x,y)(w,h)를 알수 있어야 한다
• 제약은 강한 제약 -> 약한 제약으로 영향을 받음
• 고정되어야 할(강하게 제약받아야 할) 부분과 크기에 변화가 일어날수 있는(약한 제약
을 받는) 부분을 명확히 나눠야 함
강한 제약 약한 제약
- 얼마만한 크기로 고정되어 어디에 붙어있어!
- 즉 고정되어야 하는 뷰들
- A의 뷰 (상하좌우)에 내 (상하좌우)를 X 만큼
떨어뜨려 위치시켜~
- A뷰의 (가로,세로)의 (x%)만큼 너도(가로,세
로)의 크기를 가져
- A뷰의 (x,y)축과 동일한 (x,y)축에 위치해
- 즉 다른 친구들의 변화에 맞춰지고 화면에 사
이즈에 영향을 받아 움직여야 하는 뷰들

18. • 너의 이름은 아이콘 이고 50,50 크기의
xxx.png 파일을 부모뷰의 가로축을 중심축
으로 해서 부모뷰의 최상단에서 30만큼 떨
어뜨려 위치해
• 너의 이름은 하단 주저리주저리이고 너의
좌우 하단은 부모뷰의 좌,우,하단에 맞춰 그
리고 높이는 60 이야
• 너의 이름은 센터야 넌 좌,우를 부모뷰의 좌,
우에 맞춰 너의 상단은 아이콘의 하단부터
시작이고 너의 하단은 하단 주저리주저리의
시작까지만 위치해야해

19. 120
100
100의 높이를 원했던걸까 6:5 의 비율을 원했던걸까?

20. 1. 왼쪽 서랍의 가로폭이 304 였으면 좋겠다
2. 왼쪽 서람이 전체 화면에 56만큼을 남기고
열렸으면 좋겠다
3. 서랍과 여백이 가로화면에 (304:56) 의 비율로
자리 잡았으면 좋겠다

21. 3줄요약
• 기준폰(아이폰6,7 갤럭시S) 의 기준화면으로 작업
• 모바일 앱은 PX 단위가 아닌 PTor DP단위
• 모바일 앱 디자인의 핵심은 제약

22. 마치면서
디자이너 개발자
- 내가 만든 화면이 작은화면, 큰화면에서 표시
될때 반응할 적은 제약의 영역을 항상 생각하
여야 한다.
- 내 아이덴티가 들어가는 부분에 대해서는 정
확히 명시해준다(특히 비율)
- 레이아웃을 만들면서 수시로 작은화면과 큰
화면에서 에뮬레이팅을 확인하여 특정화면
에서 깨지는 경우가 있는 지 확인 있다면 바로
협의
- 구현하는데 제약사항이 명확하지 않다면 혼
자 판단하지말고 디자이너와 상의
결론은 애매하면 물어봐라!!

23. 참고 사이트
1. 스케치(https://www.sketchapp.com/)
2. 제플린(https://zeplin.io/)
3. 스케치와 제플린을 이용한 작업(http://blog.minimap.net/index.php/2017/02/02/sketch-zeplin/)
4. 어도비XD 이거 짱좋아보여요(http://www.adobe.com/kr/products/experience-design.html)
5. 스케치와 어도비XD비교(http://slowalk.tistory.com/2429)
6. 모바일의 화면정보 사이트(https://material.io/devices/)
7. 픽셀과 PT DP 에 관한 정리(https://brunch.co.kr/@ultra0034/23)
8. 안드로이드와iOS 디자인 차이(https://swifter.kr/2017/05/08/ios-android-%EC%95%B1-ui-
%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B9%84%EA%B5%90/)

24. 감사합니다.