이 블로그의 저작물은 별도
표시가 없는 한 아래 조건에
따라 사용 가능합니다
- 저작자 명시 필수
- 영리적 사용 불가
Twitter for Android: A closer look at Android’s evolving UI patterns
안드로이드 개발팀은 안드로이드 플랫폼 업그레이드 할 때마다, 서드파티 개발자들이 보다 좋은 어플리케이션을 만드는데 도움이 되도록, UI 기능들이 어떻게 작동하고 어떤식으로 구성하는 것이 좋을지에 대한 예시로서 다양한샘플 어플리케이션을 만들곤 했다. 예를 들어 Twitter 와 함께 작성한 안드로이드 트위터 어플리케이션은 개발자들이 재미있으면서도 기능적으로도 훌륭한 커스텀 어플리케이션을 작성하는 방법에 대한 하나의 예가 될 수 있다. 이 블로그 포스트는 안드로이드 트위터 어플리케이션을 작성할 때 사용한 새로운 UI 패턴들에 대해 설명하고, 개발자들이 해당 패턴을 자신의 어플리케이션에 적용하고자 할 때 어떻게 활용하면 좋은지에 대한 팁을 담고 있다. 그럼 지금부터, 안드로이드 트위터 어플리케이션에서 적용된 UI 패턴들을 자세하게 살펴보자. Pattern1: Contacts Sync with Address book at Sign in (로그인 시 주소록 정보 동기화 ) 트위터 어플리케이션을 만들 때 추가된 가장 중요한 기능 중 하나는, 사용자의 트위터 주소록 정보를 휴대폰의 폰북 정보와 동기화 하는 것이다. (주> 그림에서 처럼 자신이 Following 하고 있는 사람들의 관한 정보를 휴대폰 폰북과 동기화 하는 기능입니다.) 두 가지 정보를 결합하게 되면, 트위터 어플리케이션 유저는 안드로이드 폰에서 QuickContact 위젯을 이용하여 간편하게, 다양한 방식으로 자신의 Follower 들에게 연락을 취할 수 있다. We recommend:
Pattern 2: Twitter account integration with QuickContact for Android (QuickContact 을 통한 트위터 계정 결합) 안드로이드의 QuickContact 은 어플리케이션 내에서 사용자가 주소록 정보에 바로 접근한 후, 어떠한 방법으로 상대방에게 메세지를 전달 할 지 고를 수 있도록 해준다. 예를 들어 위 그림에서처럼, 사용자가 특정 사람의 사진을 탭 하는 경우 QuickContact 기능이 실행되고, 전화, 이메일, 혹은 SMS 를 보낼 수 있다. 안드로이드 트위터 어플리케이션 외에 E-Mail 이나 메세지, 캘린더와 같은 다른 어플리케이션도 QuickContact 위젯을 사용한다. 만일 사용자가 주소록 정보를 개발자의 어플리케이션과 동기화 하기로 선택하면, 개발자는 이 굉장히 유용한 기능을 별다른 노력을 들이지 않고 손쉽게 구현할 수 있다. Pattern 3: Dashboard (대쉬보드) '대쉬보드 패턴'은 사용자에게 어플리케이션을 소개하는 홈 화면으로 적용되며, 어플리케이션이 제공하는 카테고리나 기능 목록을 표시해준다. 또한 우리는 이 화면에 다음에 소개할 '액션 바' 를 포함할 것을 권장한다. 대쉬보드 화면은 정적일 수도 동적으로 움직일 수도 있다. 예를 들어, 트위터 어플리케이션의 경우에는 안드로이드 2.1 에서 소개된 Live Wallpaper 기능을 활용하고, 현재 트위터의 실시간 트랜드 키워드와 트윗 버드의 실루엣을 이용하여 움직이는 대쉬보드를 만들었다. We recommend:
Pattern 4: Action Bar (액션바) '액션바' 는 어플리케이션 사용자들이 가장 빈번하게 사용되는 기능을 화면내에서 바로 접근할 수 있도록 해준다. 우리는 개발자들이 정말로 가치 있고 공통적으로 사용되는 액션에 대해서만 '액션바' 패턴을 사용할 것을 권장한다. '액션바' 패턴은 타이틀 바를 변경하는 방식으로 구현된다. '대쉬보드' 패턴과 같이 사용될 때, 액션바의 왼쪽 상단에 어플리케이션 로고를 위치하고 해당 로고가 탭되는 경우 대쉬보드 화면으로 바로 갈 수 있는 퀵 링크 기능을 지원하면 좋다. We recommend:
Pattern 5: Search Bar (검색바) '검색바' 패턴은 어플리케이션 상에서 검색이 가능한 리소스들을 빠르게 접근할 수 있도록 도와준다. 예를 들어, 안드로이드 트위터 어플리케이션에서 유저들은 검색바 패턴을 이용해, 특정한 트윗 내용 혹은 어떤 사람을 손쉽게 찾을 수 있다. 위 그림에서 처럼, 검색바 패턴은 액션바 위에 위치하게 된다. We recommend:
한 가지 덧붙이자면, 개발자들은 검색바의 검색 대상을 선택하는 구조 (위 그림에서 트윗 내용과 사람중 하나를 선택하는 기능)를 탭 대신 사용해도 좋다. 왜냐하면 이 방식이 어떠한 데이타 셋을 선택해야되는지 보다 빠르게 선택할 수 있도록 도와주기 때문이다. 탭은 한 화면에 세개 밖에 표시될 수 없기 때문에, 만일 선택가능한 데이타 셋의 종류가 세 가지 이상이라면, 탭을 활용하는데는 문제가 생길 수 있다. 예를 들어 안드로이드 트위터 어플리케이션은 아래와 같은 방식으로 사용자가 다양한 형태의 뷰를 선택할 수 있도록 구현되어있다. Pattern 6: QuickActions (퀵액션) '퀵액션' 은 안드로이드 팀의 가장 최신의 UI 패턴이다. 현재 '퀵액션' 패턴은 화면상의 특정 UI 요소를 탭할 때 UI 요소의 내용을 가리지 않는 방식으로 팝업이 나타나는 형식으로 구현되어 있다. 우리는 개발자들이 리스트뷰와 연결되어 있는 데이타가 여러가지 다양한 액션들과 연결될 수 있는 경우에 사용할 것을 추천한다. 퀵액션은 특정 아이템을 오랜 시간 탭하는 경우 나타나는 안드로이드의 전통적인 컨텍스트 다이알로그 화면을 대체할 수 있다. (주> 컨텍스트 메뉴는 항상 화면에 나오는 위치가 고정되어 있어서 좀 불편한 경향이 있었습니다.) 트위터 어플리케이션의 리스트뷰에 이 패턴을 사용해서, 유저들은 선택된 리스트뷰의 아이템 정보와 해당 아이템과 연결된 액션을 한 화면에서 확인할 수 있고, 원하는 액션을 보다 손쉽게 실행 할 수 있다. 한발더 나아가, 우리는 리스트 뷰에 포함되어 있는 링크들을 사용자가 누르기 쉽도록, 리스트 뷰의 버튼 기능을 껐다. 사용자는 한 번의 탭으로 링크를 확인 할 수 있으며, 또는 트윗 메타 데이터를 탭해서 특정한 트윗이 포스팅 된 지점을 지도로 확인 할 수도 있다. We recommend:
Pattern 7: Companion Widget (동반자 위젯) '동반자 위젯' 패턴은 모든 진지한 개발자들에게 추천하는 UI 패턴이다. 위젯은 단순히 어플리케이션으로 연결되는 커다란 버튼이여서는 안되며, 올바르게 사용한다면, 개인화될 수 있는 홈화면에 비록 작지만 개발자의 어플리케이션만을 위한 공간을 제공해 준다. 안드로이드용 트위터 어플리케이션의 경우, 우리는 두 가지 크기의 위젯을 설계하고 구현하였다. 두 가지 위젯 모두 사용자가 현재 트윗된 내용들을 볼 수 있도록 해주지마, 작은 사이즈 위젯과 큰 사이즈 위젯은 서로 조금 다른 기능을 제공한다. 작은 위젯은 답변을 달 수 있는 기능을 트윗 어플리케이션에 맡긴 반면에 큰 위젯의 경우에는 새로운 트윗을 작성하는 Activity 로 바로 연결 된다. We recommend:
우리가 꽤 올바른 일을 하고 있는거 같지 않으신가요? 여러분이 예상하다시피 우리는 곧 안드로이드 오픈 소스 프로젝트에 이 어플리케이션을 공개할 예정입니다. 우리는 개발자들이 공개될 코드와 새롭게 제안된 UI 패턴들을 기반으로 어떤 새로운 어플리케이션을 만들지 기대하고 있습니다. |
작성하신 에 이용자들의 신고가 많은 표현이 포함되어 있습니다.
다른 표현을 사용해주시기 바랍니다.
건전한 인터넷 문화 조성을 위해 회원님의 적극적인 협조를 부탁드립니다.
더 궁금하신 사항은 고객센터로 문의하시면 자세히 알려드리겠습니다.