[앱 디자인] 디자인 가이드 만들기 - 안드로이드

작성자: -
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^

 * 안드로이드 앱 디자인 가이드 작업의 특징

안드로이드의 해상도입니다

이미지 출처: http://bit.ly/2hifr90

보시다시피 어마어마하게 많습니다 ^^ 이 모든 해상도를 일일이 지원할 수가 없어요~
그래서 몇 가지 대표적인 해상도를 지원하는 방향으로 가이드를 잡고 이미지 작업을 합니다.

아이프렌즈펫의 경우에는 저해상도, 중간 해상도, 고해상도 3개를 지원해서

720 x 1280
1080 x 1920
1440 x 2560

이 세 가지로 이미지를 오렸구요, 가이드는 720 x 1280 기준으로 작업했습니다.

*좌표
안드로이드는 상대 좌표로 작업합니다. 워낙 다양한 폰 사이즈 때문에 절대 좌표로 잡기 어려워요. 그래서 가이드에 중요한 정보는 좌표보다는 간격, 크기입니다.

*색상값 
#123456 헥사 컬러 코드를 주로 사용합니다. 가이드에 이 값을 표기해주세요.

*이미지 작업
수치값 계산 작업을 했다면 아이콘 등등을 잘라서 PNG 로 공유합니다.

이건 당연히 해상도별로 아이콘을 오려야 하는데요... 수치값은 720 기준으로 했다 하더라도 1440 등 다른 해상도 기준으로도 아이콘을 잘라드려야 합니다.

따라서 당연히 이미지는 Vector 아이콘으로 작업하셔야합니다 ^ㅁ^ Ctrl + I 눌러서 해상도 크기 늘리시면 되구요 (디자인 경력 1개월 미만을 위한 충고 ㅋ )

이미지 버튼의 경우
단순한 사각형, 원형 같은 버튼의 경우 코딩으로 작업이 가능하지만 특별한 모양의 버튼의 경우 이미지를 잘라드려야 하는데요, 버튼을 자를 때는 기본적으로 세 가지 상태에 대해서 만들어 주셔야 합니다. (경우에 따라 한두가지 필요없는 게 있을 수 있구요)



* 나인 패치

안드로이드에서는 앱 퍼포먼스를 높이기 위해 최소한의 그래픽으로 화면을 표현합니다. 그래서 나온 특별한 것이 '나인 패치'인데요.


이렇게 생긴 이미지 파일이구요 (단순 PNG)
아래처럼 만들면 됩니다.

늘어나는 영역, 컨텐츠 영역에 1px 로 까만 라인을 그려서 표시하고 PNG 로 저장해주면 됩니다. 컨텐츠영역은 늘어나는 모든 부위를 표시해주고, 늘어나는 영역 쪽 라인은 늘어나서는 안 되는 부분을 제외한 곳에 선을 그어주시면 저런 식으로 영역을 잡아 이미지를 늘여 작업할 수 있게 됩니다.


*애니메이션
아이프렌즈펫 팀 개발자님은 gif 가 무겁다고 PNG Sequence 로 직접 애니메이션 되도록 구현하셔서요. 아이프렌즈펫 같은 경우에 모션은 아이폰은 gif 로, 안드로이드는 PNG Sequence 로 드렸습니다.


※팁 

반드시 모든 사이즈의 이미지가 필요하지 않은 경우도 있습니다
공통으로 사용하는 아이콘인데 이미지가 작아 용량이 크지 않은 아이콘의 경우, 퍼포먼스에 크게 문제되지 않기 때문에 가장 큰 화면 사이즈에 맞게 아이콘을 잘라서 작은 화면에서도 공통으로 사용해도 됩니다.



그밖에 고려할 점...

제가 가장 부족한 부분인데요, 화면을 움직였을 때, 텍스트가 단 한 줄일 때 등 인터랙션 후의 화면 모습도 생각해서 어느정도 가이드를 첨부해주시는 게 좋습니다.

디자이너가 원하는 바를 가능한 한 세세하고 디테일하게 잡아주지 않는다면 상상 밖의 결과물이 나올수 있습니다 ^ㅁ^;;; 협업은 정말 어려워요~

특히 안드로이드에서는 해상도와 비율이 천차만별로 다르기 때문에 세로 길이가 달라서 디자이너가 예상 못했지만 스크롤이 생기는 화면이 생길 수도 있는데 그때마다 어떻게 처리할지도 고민이 필요한 것 같아요. 입력창이 있는 화면이라면 더더욱^^




*아이프렌즈펫 디자인 가이드 화면 결과물



폰트는 ABC, 이미지는 123 이런식으로 아이콘을 붙여서 만들었습니다.


디자인 가이드 만들기 - 아이폰 편 보러가기 > http://devstory.ibksplatform.com/2017/09/blog-post_18.html
디자인 가이드 작업에 유용한 툴 + 소개 보러가기 > http://devstory.ibksplatform.com/2017/09/blog-post_63.html



*디자인 가이드를 작성하면서 많은 도움을 받은 사이트입니다.

개발 협업을 위한 안드로이드 디자인 가이드 #01 http://leipiel.tistory.com/7
개발 협업을 위한 안드로이드 디자인 가이드 #02 http://leipiel.tistory.com/8



*위 디자인 가이드로 만든 결과물입니다. ^ㅁ^...

댓글

  1. Unknown2017년 11월 21일 오전 10:42

    좋은 정보 감사합니다!
    그리고 질문이 있는데요~
    디자인 가이드 작업은 주로 PPT로 일일이 작업을 해서 개발자한테 넘겨주나요?
    Assistor ps를 사용하면 작업이 빠르기는 한데 가독성이 많이 떨어지더라구요 ㅠㅠ
    답변 부탁드릴께요!

    답글삭제
    답글
    1. 명동섞어찌개2020년 2월 25일 오전 9:41

      저는 PPT 로 문서를 만들어서 드렸어요 ^^ Assistor PS 로 하면 PSD 파일에서부터 1px 단위로 신경써서 작업해야해서 작업이 오히려 더딘 면도 있고.. 가장 좋은 건 요즘식대로 Adobe XD나 스케치를 사용해 Zeplin 플러그인 꽂고 가이드 뽑아내는게 가장 최신 트렌드로 좋은 방법 같네요

      삭제
  2. Unknown2017년 11월 21일 오전 10:42

    좋은 정보 감사합니다!
    그리고 질문이 있는데요~
    디자인 가이드 작업은 주로 PPT로 일일이 작업을 해서 개발자한테 넘겨주나요?
    Assistor ps를 사용하면 작업이 빠르기는 한데 가독성이 많이 떨어지더라구요 ㅠㅠ
    답변 부탁드릴께요!

    답글삭제
  3. 익명2017년 12월 18일 오전 10:28

    안녕하세요 세세한 정보들이 도움이되었어요 감사합니다! 한가지 여쭤볼게 있어요. 안드로이드 앱 제작을 할때, 2880*1440로 작업하라고 주변에서 들었는데 비율이 안맞는 것 같아서요. 일러스트에서 작업하실때, 흔히 하는 작업픽셀 정보를 알려주실수있을까해서 댓글 남깁니다.

    답글삭제
    답글
    1. 명동섞어찌개2020년 3월 23일 오전 8:55

      안드로이드는 기기마다 비율이 제각각이라서 어떤 해상도나 비율을 기준으로 잡고 갈지를 기획자, 개발자와 상의하셔서 정하고 시작하시면 됩니다. 같이 작업하는 사람들과 정하는 것이라서 절대적인 기준은 없을 것 같네요. 저의 경우에는 개발자님 의견에 따라서 저 해상도를 기준으로 잡고 작업한 거라서요!! 그리고 저는 포토샵에서 720 X 1280 로 작업했구요. 720 기준으로 이미지를 잘라도 고해상도 폰에서 크게 깨져보이지 않는 상황이어서 거기서 작업을 해서 드렸어요. 너무 이미지가 커도 퍼포먼스에 문제가 있어서요 ^^ 요즘은 Adobe XD 나 스케쳐 같은 툴로 하시는게 더 좋을 것 같아요.

      삭제
  4. 익명2018년 7월 24일 오후 2:30

    이미지 작업에서 벡터 이미지로 그려야한다는게 일러스트레이터에서 작업후 포토샵으로 가져온다는 말인가요?

    답글삭제
    답글
    1. 명동섞어찌개2020년 3월 23일 오전 8:50

      그렇게 하셔도 되구요, 저는 포토샵으로 대부분 작업했어요. 요새 많이 쓰는 Adobe XD 나 스케치에서는 기본적으로 안 깨지게 벡터 이미지로 나와서 제플린 플러그인 꽂으면 사이즈별로 다 자를 수 있게 해주는 것 같더군요. 그런 툴을 사용하시는 걸 더 추천드려요..!

      삭제
  5. Unknown2020년 11월 17일 오전 10:05

    figma 툴로 요즘 이용하면 다른 툴은 구지 사용하지 않아도 개발자와 같은 화면을 공유해서 이용할 수있습니다. 포토샵이나 일러스트 사용자는 익숙하게 사용 가능하더라구여

    답글삭제

댓글 쓰기

주간 인기글

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

작성자: -
이미지
[그림출처]  https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다. 문자 그대로. SNS는 사용자들이 자발적으로 공유하는 글, 사진 등의 정보를 모아서 그 데이터를 기반으로 어떤 사용자가 무엇에 관심이 있는지 파악하여 사용자들에게 가장 관심 있을 만한 광고를 보여주곤 합니다. 몇 년 전부터 페이스북은 앱의 마이크 접근 권한 을 사용하여 핸드폰 주위의 모든 대화 등의 소리를 수집.파악하여 폰 사용자가 무엇에 관심 있는지 데이터를 얻고, 타겟 맞춤 광고에 이 정보를 활용한다고 하는 의혹을 받아왔습니다. 페이스북에 인수된 인스타그램도 마찬가지로요. 저도 가끔 의아했습니다. 어떻게 내가 검색창에서 검색한 적도 없고, 사진도 찍은 적 없고, 글로 쓴 적도 없는 어떤 것에 대해서 인스타그램이 나에게, 그것에 관해 얘기한 지 10분 만에 정확히 그와 관련된 상품을 광고로 보여줄 수가 있지? 그런데 동일한 의문을 품은 유저들이 여러 명 있었던 것 같습니다. (관련글  https://www.imore.com/how-stop-facebook-accessing-your-microphone https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023  ) 물론  페이스북이나 인스타그램은 공식적으로 '절대로 그렇지 않다' 고 발표하지만, 그렇다고 하더라도 혹시 있을 수 있는 사생활 침해에서 앱의 마이크 접근 권한을 차단하는 것은 나쁘지 않은 것 같습니다. 만약을 위해 사생활을 보호하려면, 페이스북이나 인스타그램 앱 설정 부분에서 페이스북 앱, 인스타그램 앱의 마이크 접근 권한을 비활성화 하시면 됩니다. 1. 아이폰 또는 설정에서 아래로 스크롤해서, 인스타그램 앱을 선택한 다음, 해당 앱의 마이크 권한 비활성화를 해도...
자세한 내용 보기

남산 케이블카 이야기

작성자: -
이미지
남산하면 떠오르는 것이 무엇이 있을까요. N서울타워(구 남산타워), 남산돈까스, 케이블카, 도서관, 팔각정등 많은 것이 떠오를 것 입니다. 그래도 남산 관광이라고 한다면 N서울타워와 케이블카를 뽑을수 있지 않나 생각 합니다. 남산은  버스, 도보, 자전거업힐(?) 처럼 꼭 케이블카가 아니더라도 올라갈수 있는 방법은 많습니다. 그래도 한번쯤은 케이블카를 타고 올라가 보는 것이 관광객에게는 로망이 아닐까 싶습니다. 남산케이블카의 시작                                                        <개통 당시 남산 케이블카 모습 / 출처 : 국가기록원>   준공 : 1962년 5월 12일 운행 시작 : 1962년 5월 14일 길이 :  605m 낙차(저점과 고점의 높이차이) : 138m 편도 운행시간 : 초기 약4분 -> 현재 약3분 운행 요금(당시 어른 버스요금 5원) : 왕복400환(어른 40원) 남산 케이블카는 국내 최초의 여객용 케이블카로 '은하수' 와 '무지개' 두대로 운영을 시작 하였 습니다. 처음에는 케이블카란 이름이 아닌 삭도차란 이름으로 불려 다고 합니다. 삭도란 공중에 로프를 가설하고 여기에 운반기구(차량)를 걸어 동력 또는 운반 기구의 자체 무게를 이용하여 운전하는 것입니다. 최초운행정원은 20명(현재 48명) ...
자세한 내용 보기

[Angular] 모델, 값이 바뀌었는데 화면 template 이 업데이트 되지 않을 때 조치 팁

작성자: -
안녕하세요. 명동섞어찌개입니다. Angular 로 화면을 만들다 보면 종종 서버에서 값을 읽어와서 비동기로 화면이 업데이트 되는 상황에서, 화면에 바뀐 값이 반영되지 않는 경우가 생깁니다. 분명 ts (typescript) 의 값은 바뀌었고, 서버에도 문제가 없는데 html template 화면만 값이 제대로 표시되지 않는 경우가 있습니다. 이럴 때 사용할 수 있는 간단한 방법을 공유하려고 합니다. 1. ngIf = "flag == true" 를 씁니다. data.html 1 2 3 4 5 < div * ngIf = "data.length > 1" > < span * ngFor = "let item of data; let idx=index" > < span >{{ item }}</ span > </ span > </ div > data.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 data = null ; . . . getData () { this . dataService . getDatas (). subscribe ( data => { this . data = data . result ; }, ( { error } ) => { } ) } 비동기로 서버에서 값을 읽어올 때, 값이 들어온 시점에 (data.length > 1) 정확히 데이터를 들고 화면을 그려주기 위해 template 쪽에 ngIf 문을 이용해서 그려줍니다. 저런식으로 화면 일부가 데이터가 계속 바뀜에 따라 지속적으로 업데이트 되어야 하는데, 값은 잘 들어오지만 template 은 새로 그려지지 않을...
자세한 내용 보기

안드로이드에서 당겨서 새로고침(SwipeRefreshLayout) 쉽게 구현하기

작성자: -
앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다. 몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다. 하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다. SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다. 1단계 : 레이아웃 새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.       <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe_refresh"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"></WebView> </android.support.v4.widget.SwipeRefreshLayout> 2단계 : 새로고침 이벤트 해당 뷰 영역을 위에서 아래로 당기면...
자세한 내용 보기

Java8 Stream 가이드

작성자: -
Java8 Stream 가이드 1. 개요 Java 8의 새로운 기능 Stream에 대해 설명합니다. 2. Stream API Java 8의 주요 새로운 기능 중 하나는 여러가지 요소(element) 처리를 위한 매우 강력한 스트림 기능인 java.util.stream 입니다 . 클래스는 Stream 이며, T 타입 기반의 Stream을 다양한 방법으로 생성할 수 있습니다. 2.1. Stream 생성 stream () 및 of () 메소드를 사용하여 콜렉션 또는 배열과 같은 다른 요소 소스에서 스트림을 작성 String [ ] arr = new String [ ] { "a" , "b" , "c" } ; Stream < String > stream = Arrays . stream ( arr ) ; stream = Stream . of ( "a" , "b" , "c" ) ; stream 을 생성하는 쉬운 방법은 컬렉션 인터페이스를 통해 생성할 수 있습니다. Stream < String > stream = list . stream ( ) ; 2.2. 멀티쓰레딩 Streams stream API는 또한 스트림 요소에서 병렬 모드로 작업을 실행 하는 parallelStream() 메서드를 제공하여 멀티 스레딩을 단순화 합니다. 아래 코드 는 스트림의 모든 요소에 대해 doWork () 메소드 를 병렬 로 실행할 수 있도록 합니다 list . parallelStream ( ) . forEach ( element - > doWork ( element ) ) ; 3. Stream 사용법 스트림에서 제공하는 함수는 크게 중간 작업 (return Stream, self-return )과 연산작업 (특정 타입으로 return ) 으로 나뉩니다. long count = list . ...
자세한 내용 보기