안드로이드 앱 개발자가 제안하는 디자인 방법론 – 5. 가이드 작성법 2

 

저번 시간까지 가이드 작성법을 알아 보았다. 이번 시간은 마지막 시간으로 상용화된 앱을 바탕으로 좀 더 디테일한 가이드 작성법을 소개 해보겠다.

일반적으로 리스트 형식이라면 이전 시간까지의 설명으로 충분히 커버될 수 있지만, 아래처럼 한 화면에 모든 정보가 담겨야 되는 스크롤 되지 않는 뷰의 경우 좀 곤란한 상황들이 발생 할 수 있다.

아래는 인스타웨더라는 앱으로 첫 화면을 가이드를 작성 해보았다.

사실상 가운데 이미지를 두개로 나누지 않고 통이미지로 잡은뒤, weight 1 을 하나만 잡은상태에서 gravity를 center 정렬로 하면 쉽게 해결 되는 부분나, 기준점은 weight 1을 하나가 아닌 여러기준을 잡을 수 있다는 것을 보여 주기 위해 이렇게 작성 하였다.

가장 중요한 부분은 이전시간에 이야기한 절대적인 수치보다는 상대적인 표현을 하라는 것이다.

weight 1이라고 적힌 부분은 가변될수 있는 부분이라는 뜻이다. 해상도가 커지거나 작아질 경우 저위치한 부분들이 변하게 된다.

이 처럼 UI 디자인 가이드를 작성 하면 좋을 것이다.

아래는 1024×768 해상도를 가진 거의 최악의 화면이다. 하지만 우리는 프로니까 이런 해상도도 모두 지원하는 앱을 만들어야 되지 않을까?

디자인 가이드처럼 weight 1 부분이 줄어 들어 해상도에 맞게 잘 나오는것을 확인 해 볼 수있다.

아쉽지만 여기까지 안드로이드 앱 개발자가 제안하는 디자인 방법론에 대한 강의를 마치겠습니다. 궁금 하신점은 언제나 댓글이나 SNS가 열려있으니 질문 주시면 됩니다.

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – 5. 가이드 작성법 2”에 대한 13개의 생각

  1. 안녕하세요?
    해상도orDPI 기준은 어떠한 것을 잡던 디자이너나 개발자에게 효율적인것은 없다고 생각됩니다. 어짜피 다양한 해상도를 지원하기 위해서 추가적인 리소스와 작업이 필요하기 때문이죠. 저 같은 경우에는 현재 가장 많이 출시된 해상도를 기준으로 작업 하고 있습니다. 요즘 1280×720사이즈가 480×800보다 점유율이 높기 때문에 1280×720로 가이드를 권해드립니다. 480×800사이즈는 dip단위로 가이드작성과 해당 리소스만 만들어주신다면 원하시는 UI를 갖출수 있을것입니다.
    더 궁금 하신점 있으시다면 언제든지 댓글 남겨주세요. 🙂

  2. 안녕하세요. 안드로이드 가이드관련 자료를 찾다가 큰 도움이 됐습니다. 그리고 궁금한 것이 있어 글을 남깁니다.
    안드로이드 dp가이드 작업때마다 얘기가 되는 부분인데 dp 가이드를 넘길 경우 480×800기준, 720×1280기준 중 어느 것이 디자이너나 개발자나 더 효율적인가요? 점점 480 사이즈 디바이스 수요가 줄고 있는 상황이지만 480기준으로 나가는 것이 그래도 다양한 해상도의 안드로이드 기반의 기기를 아울러서 UI가 잘 나올까요? 조언 부탁드립니다. 감사합니다.

  3. 가운데 이미지가 v-top하고 v-bottom하고 바뀌어야 하는거 아닌가요??

  4. instaweather_bi.png의 이미지가 왼쪽에 바짝붙는게 아닌데 이미지에 여백을 두고 자르는게 좋을까요? 아니면 margin:left-10dp 이렇게 하는게 좋을까요?

  5. 안녕하세요!
    vertical(수직) 정렬은 아래또는 위로 정렬 되는게 맞으며, horizontal(수평) 정렬은은 가운데 정렬이 되어야 하므로 현재 가이드가 맞습니다.

  6. 특별한 경우가 아니라면 레이아웃에서 수치를 주는게 맞을것 같습니다.
    예를 들어 폰일 경우에는 10dip의 margin을 주고, 테블일 경우 다른 수치를 주고 싶다면 더더욱 이미지로 해결하는 것 보다 레이아웃에서 수치를 주는것을 권해드립니다.

  7. 저도 개발자인데 님 참 설명을 못하시네요. 아니면 일부러 어렵게 설명하시는 것이거나 5화쯤 쓰다보니 쓰기가 귀찮아 지셨나 봐요. 개발자 하신지 연차는 얼마 안되신거 같아 보이는데…

  8. 님은 얼마나 잘하신다고 열심히 강좌 써주신분에게 그러시면 글쓴이가 기분이 좋겠습니까?
    대충 읽어봤지만 그래도 성의가 있게 쓰셨습니다

  9. 안녕하세요.
    좋은 지적감사드립니다.
    제가 아는 지식을 글을 통해 전달한다는것에 대해 아직 많이 미흡하고 배워나가고 있는 과정이니 많이 부족하더라도 이해해주시면 감사드리겠습니다.

  10. 일년전 글이지만 이제 첨 안드로이드 디자인을 하는 입장에서 도움이 많이됐어요.
    디자인 다 해놓고 개발자분께 가이드를 드려야하는데 참 헷갈리는게 많네요. ㅠㅡ
    psd로 드리면 그 위에 그대로 그려서 개발하시겠다는데 위의 가이드처럼 정확한 수치를 주고 싶은게 욕심인데 아직도 제가 디자인한 px를 몇 dip로 적어 드려야할지 헷갈립니다. 그래도 도움이 많이 됐어요 글 감사합니다.

  11. 안녕하세요?
    도움되어서 정말 다행이네요. 그러고보니 벌써 일년이라는 시간이 자났네요..
    참고로 요즘 xhdpi로 작업들 많이 하셔서, xhdpi의 dp는 px의 1/2배이기때문에 계산이 그마나 쉬울꺼에요.
    감사합니다^^

  12. 시니시즘 // 말이라는게 정말 아하고 어다른겁니다. 죄송한데 이따위로 댓글 다실거면 그냥 지나가세요. 연차운운하시는데 연차많으셔서 기분나쁘게 말씀하시는것만 배우셨나 보네요.
    이 글을 통해 대략적으로나마 개발자와 디자이너간의 소통이 된다면 좋은일 아닐까요? 누군가의 노력을 폄하하고 비난하지맙시다 쫌. 서로 좋은 피드백으로 같이 발전할 수 있잖아요.

  13. 전 웹디인데 갑자기 어플 디자인 플젝이 떨어진 바람에 제대로 멘붕상태에요. 게다가 지금 개발자도 없어요. 아직 채용중이거든요 ㅜㅜ 어디 물어볼 곳도 없고.. 카페에도 이런저런 질문해봐도 제대로 된 대답도 못들었구요..
    그런데 님께서 올려주신 글들이 오래전 글인데 여태까지 봤던 글들 중 가장 이해하기 쉽고 많은 도움이 되는거 같아요~
    정말 감사드려요^^

    그런데 dip개념이 아직 알듯 말듯하네요~ 실무 들어가봐야 알지모르겠지만… 일단 지금은 xxxhdpi까지는 고려해서 1440*2560 해상도 기준으로해서 디자인 파일을 만들어야 할 것 같은데…
    작업은 웹이랑 동일하게 픽셀로 작업하고 이미지를 자르되, 개발자에게 넘겨줄때 그 픽셀 이미지를 dip계산해서 넘겨주면 된다는건가요??
    이 부분이 헷갈리네요~ ㅜㅜ

댓글 남기기