윈도우폰7 UI 디자인 가이드

윈도우폰7의 앱 디자이너(및 디자인도 하는 개발자)를 위한 UI 디자인 & 인터랙션 가이드를 소개합니다.

핸드폰 화면에서 터치를 하려면 손가락의 크기 때문에 작은 버튼의 경우 불편함을 느끼게 됩니다.

그래서 윈도우폰7의 경우 이와 관련한 인터랙션 가이드를 제공하여 개발자들이 보다 사용하기 편리한 앱을 만드는데 활용할 수 있도록 하고 있습니다.

오브젝트의 크기는 최소 26px 이상, 터치 영역은 34px 이상, 둘 이상의 오브젝트 사이 간격은 8px 이상을 권장합니다.

터치 영역은 실제 보여지는 크기가 26px 이더라도 8px 더 넓게 잡아서 34px 이상으로 만드는 것이 필요합니다.

UI의 테마는 현재 4가지 색상의 컬러만 가능합니다.

페이지 형식을 띈 앱의 기본적인 페이지 레이아웃입니다. 개발툴에서 프로젝트를 할 때 만들 수 있는 리스트앱과도 흡사합니다.

하드웨어 버튼은 총 7개 입니다. 사진 찍을 때 오른 손 검지손가락 위치의 카메라(4)나, 오른손 검지의 파워(1), 왼손 엄지의 볼륨(2) 등으로 배치되어 있습니다.

윈폰7의 타일은 위와 같이 2개의 레이어로 구성된답니다. 백그라운드 이미지와 텍스트 라벨. 두개가 합쳐져서 우측 하단과 같은 모습이 됩니다. (Tile API는 현재 버전에서는 사용할 수 없습니다.)

타일

타일 알림의 크기 역시 터치 영역 가이드(34px)에 맞는 37x37 크기네요.

좌우로 펼쳐진 형태의 파노라마 애플리케이션입니다. 각 메뉴와 타일, 타입의 위치 및 폰트에 대한 가이드이고 파노라마 형식의 애플리케이션을 만들 때 참고할 만 합니다.

이미지를 중심으로 구성하는 경우의 그리드 구성입니다. 이미지 사이즈를 잘 보세요.

텍스트를 중심으로 구성하는 경우엔 이와 같이 됩니다. 큰 글씨와 작은 글씨를 적절하게 배치하여 시선의 강약을 조절해 줍니다.

윈폰7의 UI는 실버라이트로 만들어 지기 때문에 위 가이드와 관계 없이 자유로운 표현도 가능합니다. 보다 깔끔하고 세련된 느낌의 앱 디자인을 위한 가이드 정도로 활용하면 좋겠습니다.