Korean 字幕

← 07-20 Responsive Design

埋め込みコードを取得する
10言語

Showing Revision 1 created 12/25/2014 by Seung Hyun Kim.

  1. 이제 와이어프레임을
    두 화면에 모두 적용했습니다
  2. 그런데 태블릿에서는 어떻게 보일까요?
  3. 안타깝게도 휴대폰 UI를
  4. 태블릿 화면에 맞게 늘리면
    보기가 별로예요
  5. 쓸데없이 빈 공간이 많아지니까요
  6. 늘어난 공간을 활용해
    추가 정보를 출력하는 편이 낫겠어요
  7. 예를 들어 상세 정보를
    같은 화면에 표시할 수 있는데
  8. 굳이 한번 더 탭하도록 구성할 필요가 없죠
    또 전체 일기예보 목록을
  9. 보려면 시선이 이렇게 왔다갔다해야 해요
  10. 읽기 불편하죠
    유저들이 콘텐츠를 읽도록 하려면
  11. 너비를 좀더 짧게 만들어
  12. 빨리 훑어볼 수 있어야 합니다
    이런 배려들은
  13. 반응형 디자인의 일부인데요
  14. 반응형 디자인이란
    앱을 디자인할 때
  15. 다양한 화면 크기에서 사용될 것을
  16. 고려하는 것을 말합니다
    이런 디자인은 어떻게 하며
  17. 태블릿처럼 큰 화면의 기기를 고려해
  18. 만든다는 것은 어떤 의미일까요?
  19. 다중 창 레이아웃을 이용해
    화면 크기에 적응하는 예를 보여 드리겠습니다
  20. 안드로이드 디자인 가이드에는
    다중 창 레이아웃에 관한 섹션이 있어요
  21. 그 중 여러 뷰를 하나로 합치는 방법이 있는데
    피플 앱을 예로 들면
  22. 연락처 목록이 있고
    보다 자세한 연락처 카드가 있습니다
  23. 태블릿에서는 이 두 가지를
    나란히 배열해요
  24. 마스터/디테일 플로우라고도 합니다
  25. 이쪽이 마스터 리스트고
    이건 디테일 창이에요
  26. 다른 예로는 '설정' 앱이 있습니다
    열 너비가
  27. 화면 크기에 맞춰 조절되죠
    달력 앱에서는 창들이
  28. 가로 모드에서는 세로로 쌓이고
    세로 모드에서는 가로로
  29. 나열됩니다
    다른 예도 있으니
  30. 찾아보시면 좋겠네요
    태블릿을 위한 디자인이나
  31. 반응형 디자인 전반에 대해
    더 알고 싶으시다면
  32. 아래의 링크를 참조하세요
    저희 강의에서는
  33. 휴대폰 UI를 만드는 법을 먼저 배우고
  34. 태블릿 UI로 넘어갑니다
    하지만 실제로
  35. 작업할 때는 처음 구상할 때부터
  36. 반응형 디자인을 염두에 둬야 해요
  37. 자신의 앱을 만들 때는
  38. 휴대폰 앱 디자인과 코딩을
    다 마친 다음에
  39. 태블릿 UI를 구상하는 건 좋지 않아요
  40. 태블릿 UI가 종종 휴대폰용 디자인과
  41. 앱 설계에 영향을 미치기 때문입니다