muik blog☆

오즈 공모전을 계기로 모바일 기기에서 쉽고 빠르게 이용할 수 있는 쇼핑 검색 웹서비스를 만들어 봤습니다.

이번 프로젝트를 하면서 UI와 UX에 대해 많은 고민을 해보는 경험이 되었답니다:)

주요 기능

• 네이버 쇼핑 검색 API를 이용한 최저가 쇼핑 검색
• 초성 입력에 대한 상품명 추천
• 검색한 상품에 대한 관심 상품 등록/제거
• 스크롤하기 편리한 스크롤 버튼
• 자동 상품 추가 검색
• 다양한 상품 표시 스타일 변경

사이트 URL: http://muik.net/shopper

자세한 정보: http://muik.net/shopper/doc.html

아르고폰(LH-2300)으로 쇼핑 해보기

스크린샷

첫 화면

초성 입력

초성에 대한 상품명 추천

"가을신상" 검색 화면

간단 스타일로 보기

갤러리 스타일로 보기

세로 모드에서 갤러리 스타일로 보기

세로 모드에서 간단 스타일로 보기

세로 모드에서 일반 스타일로 보기

세로 모드에서 첫화면

세로 모드에서 초성에 대한 상품명 추천 화면

YouTV는 모바일 기기에서 YouTube 비디오를 TV처럼 편하게 볼 수 있는 모바일 웹서비스 입니다.

사이트 URL: http://muik.net/youtv

TV처럼 편리하게 사용할 수 있게 디자인에 많은 고민을 했어요. 화면 구성은 비디오가 재생될 수 있는 꽉 찬 화면에 채널선택[C], 재생을 제어하는 버튼 3개로 꼭 필요한 기능으로 구성했고, 동작도 TV처럼 한 프로그램이 끝나면 자동으로 다음 프로그램이 재생됩니다. 물론 광고는 없고요^^

채널은 YouTube RSS로 단순한 플레이리스트가 아닌 수시로 새로운 내용으로 변경됩니다.

채널 버튼[C]을 누르면 채널 목록이 나오는데 현재 보고 있는 시청수를 기준으로 정렬되서 보이고, 사용자는 그 시간대에 인기있는 채널을 쉽게 선택할 수 있어요. 또한 사용자가 원하는 채널을 검색어를 입력하여 검색할 수 도 있고요.

채널 검색 시 채널이 없다면 자동으로 채널을 추가하여 TV의 고정된 채널이 아닌 무한 채널을 가지는 특징도 있답니다.

처음엔 터치웹폰용으로 개발하였지만 YouTube Chromeless Player가 지원되지 않아 웹뷰어용이 되었습니다. 또한 다양한 기기에서 지원되도록 W3C 표준에 맞게 개발하였고, Internet Explorer 6~7, Firefox 3에서도 잘 동작하도록 크로스 브라우징을 고려하여 개발 하였습니다.

아래의 활용방법을 보고 이용해보세요.

좋아하는 가수(이효리) 채널 보기

1. YouTV 접속
2. 왼쪽의 [C]버튼을 클릭
3. 채널목록 상단 검색창에 ‘이효리’ 입력
4. 검색 결과의 ‘이효리’ 채널을 선택

‘이효리’의 동영상을 마음껏 편하게 감상할 수 있답니다.

이외에도 좋아하는 음악, 드라마, 스포츠, 뉴스 등 다양한 채널을 마음껏 즐겨보세요~!