요즘 〈스마트폰 앱 UX/UI 디자인〉이라는 책을 읽고 있다. 2012년 하반기에 쓰여져 2013년 4월에 출간된 책이라 아이폰4S와 갤럭시2 기준으로 설명되어 있다. 내용이 좀 오래된 감이 있지만 스마트폰 앱 디자인의 기본 지식을 두루 훌터보기에 좋은 내용으로 구성된 것 같아서 읽고 있다. 책에서 안드로이드의 기본 작동 방식에 관한 내용 중 '스와이프 제스처로 페이지를 넘기는 방식'을 알게 되었다. 이 부분을 읽고 나서 벅스뮤직 앱 탐구를 하면서 좌우 스와이프로 이전, 다음곡으로 이동하는 좋은 UI를 제대로 소개하지 않았다는 비판을 적었던 것이 떠올랐다. 내가 안드로이드 UI에 대해서 무지해서 생겨난 오해일 수도 있겠다. ☞해당 포스팅 보기 스와이프 제스처로 페이지 전환. 이 UI는 안드로이드 사용자라..
벅스뮤직 앱 탐구 마지막 5편! 홈 화면과 각 채널별 컨텐츠 구성에 대해 살펴보았다. 1. 홈어마어마한 컨텐츠 구성이다. 최신 컨텐츠, 차트 컨텐츠, 추천 컨텐츠, 정보 컨텐츠 등으로 꽉 채워졌다. 추천 컨텐츠는 뮤직PD 등 전문가 추천, 개인 취향이 반영된 추천, 기분이나 상황별 추천 등 그 카테고리가 다양하다.컨텐츠는 크게 3가지로 분류된다.최신 및 차트, 전문가 추천 컨텐츠 개인 취향이 반영된 컨텐츠기분이나 상황, 날씨와 관련한 컨텐츠, 정보컨텐츠개인 취향이 반영된 컨텐츠(아래 목록 중 두꺼운 부분)는 앱으로 음악을 좀 들은 후에 보여준다. 처음에는 보여주지 않는다. 프로모션 배너최신앨범실시간 TOP100벅스 Pick인기 뮤직PD 앨범인기 뮤직비디오내 앨범보관함내 취향을 듬뿍 담은 맞춤 내생목록내가..
스마트 오브젝트 Smart Object를 사용하여 리스트, 테이블 디자인 시 반복되는 요소를 한번에 편집하기. 1편 반복 요소의 편집이 쉬운 테이블 디자인 하기 에서 만든 화면에 대해 수정요구 사항이 발생했을 때 각각의 요소를 간편하게 수정하는 방법에 대해서 살펴본다. 정렬 아이콘 모양 변경 STEP 1 'Ctrl + 클릭'으로 정렬 아이콘 Icon_sort 레이어를 선택하고, 썸네일 아이콘을 더블클릭 한다. STEP 2 스마트 오브젝트 편집 화면이 열리면 아이콘 모양을 수정한다. STEP 3 저장하고 원래 화면으로 돌아오면 정렬 아이콘이 전부 수정되어 있다. 체크 아이콘 모양 변경 STEP 1 체크아이콘은 기본형과 비활성형 2가지 타입이다. 먼저 기본형을 수정해보자. 'Ctrl + 클릭'으로 체크 아이..
스마트 오브젝트 Smart Object를 사용하여 리스트, 테이블 디자인하기 포토샵에서도 워드나 엑셀처럼 리스트나 테이블의 스타일과 그 안에 들어가는 데이터를 한번에 선택해서 간편하게 편집할 수 있다면 얼마나 좋을까? 워드프로세서 만큼은 아니더라도 조금 더 간편한 편집 방법을 나름 연구해서 활용하고 있는데, 내가 사용하는 방법은 '스마트 오브젝트'와 '레이어 검색'을 이용하는 것이다. 테이블을 구성하는 라인, 배경, 아이콘, 텍스트 등 화면 내에서 반복적으로 사용되는 요소들을 스마트 오브젝트로 만들면 수정할 때 일일이 하나씩 고쳐주는 것이 아니라 하나의 수정으로 나머지 전부를 한번에 변경 가능하다. 두 편으로 나누어 그 방법을 소개해 보려고 한다. 1편에서는 수정이 쉬운 방식으로 테이블을 만드는 방법에 ..
오전에 집을 나서며 휴대폰을 보니 배터리가 32% 남았다. 지난 밤 충전하는 것을 깜빡 잊은 것이다. 오늘은 종일 책을 읽으려고 도서관에 가는 길이었다. 중간에 꺼지겠구나 싶었는데 순간 생각이 났다. 얼마전 도서관에서 충전기를 빌려준다는 포스터를 본 것이다. 도서관 도착 후 열림실 선생님께 문의해서 휴대용 스마트폰 충전기를 빌렸다. 배터리가 24% 남은 상태에서 충전을 시작했는데 1시간 조금 지나자 92% 까지 채워졌다. 휴대용 충전기라서 스마트폰을 맡기는 것이 아니라 내가 가지고 다닐 수 있었다. 평소에 책을 읽다가 모르는 것, 궁금한 것이 생기면 스마트폰으로 검색해가면서 책을 읽는데 오늘은 배터리가 부족해서 못할 줄 알았다. 그런데 휴대용 충전기 덕분에 평소처럼 책을 읽으며 검색할 수 있었다. 오늘 ..
포토샵 CC 2015 버전을 사용하고 있는데 얼마전 업데이트 알람이 뜨길래 업데이트를 했다. 그 후 화면 구성이 좀 바뀌었더랬다. 처음보는 Start 화면이 생겼고, 가장 많이 사용하는 우측 패널의 구성이 바꼈다. 툴바의 구성도 바꼈는데 처음에는 몰랐다. 그런데 며칠 사용하다보니 자주 사용하던 툴 몇 개가 보이지 않았다. 평소 단축키를 사용하기 때문에 눈여겨 보지 않았었는데. 툴을 사용하려고 단축키를 눌러봐도 툴이 나타나지 않았다. 원형 마키툴, 클론 스탬프툴, 번툴, 닷지툴 등이 사라져 버렸다. 삽질 끝에 툴바 구성을 편집하는 방법을 찾아냈다. 좌측은 업데이트 직후 화면이다. 내가 자주 사용하는 원형 마키툴이 없다. 우측은 툴바 구성을 편집해 자주 사용하는 툴을 추가한 상태다. 툴바 편집하기 STEP ..
벅스뮤직 앱 탐구 4편! 이번에는 FLAC전용관, 공지/문의, 설정 메뉴와 음악검색을 살펴보았다. 1. FLAC 전용관 벅스뮤직에는 고음질 음원을 제공하는 'FLAC 전용관' 메뉴가 있다. 벅스뮤직의 소개에 따르면 'FLAC 전용관' 에는 CD음질의 16bit FLAC과 스튜디오 원음 24bit FLAC이 모두 제공된다. 단, 재생하는 기기와 사운드카드 사양에 따라 해당 음질로 감상하지 못 할 수도 있다. FLAC 파일 재생에 관한 자세한 내용은 다음을 참고하기 바란다. http://goo.gl/OHavdS FLAC(Free Lossless Audio Codec)이란오디오 데이터를 손실 없이 온전한 모습으로 압축하는 파일 형식을 말합니다. MP3와 비교해 파일 용량은 크지만 고급 음질을 감상할 수 있는 ..
벅스뮤직 앱 탐구 3편! 이번에는 What's Hot, 테마/장르, 라디오, 보관함 메뉴들을 살펴보았다. 벅스뮤직 앱도 역시나 다양하게 편집된 플레이리스트를 제공한다. 무엇을 들을지 고민된다면 What's Hot, 테마/장르, 라디오. 이 메뉴들을 훌터보면 된다. 정말 다양한 추천과 제안을 해준다. 풍부한 뮤직 카테고리 중에서 골라도 되고, 뮤직PD가 엄선한 주제 중에서 골라도 되고, 벅스 앱을 좀 이용하다보면 취향에 맞는 곡으로 화면을 구성해 주기도 한다. 1. What's Hot 벅스차트뮤직4U최신복면가왕 벅스차트 뮤직4U들었던 음악을 토대로 개인 취향이 반영된 곡이 추천된다. 추천된 음악이 마음에 안드는 경우 피드백을 줄 수 있다. 최신, 복면가왕복면가왕 같은 이슈 컨텐츠를 하나의 메뉴로 뽑아 놨다..
벅스뮤직 앱 탐구 2편! 이번에는 재생목록과 내앨범 메뉴를 탐구했다. 전반적으로 스타일이 깔끔하다. 하지만 사용자 행동에 따른 피드백이 부족해서 답답하다. 1. 재생목록 재생목록 화면에는 하단 플레이어 바가 보이지 않는다. 플레이어 바 대신 목록 상단에 현재 재생중인 곡이 고정영역으로 표시된다. 이 영역을 터치하면 전체 목록 중에 그 곡이 있는 곳으로 화면이 스크롤 된다. 수백 개의 곡이 리스트에 쌓여있다면 편할 것 같다. 그런데 굳이 플레이어 바를 쓰지 않고 상단에 재생곡 표시 영역을 만든 이유가 무엇일까? 궁금하다. 하단에 플레이어 바를 두는 것이 좋겠다는 생각이 든다. 그렇게 생각한 이유가 있다. 상단의 '추가' 버튼을 사용해 재생목록 추가를 하면 곡이 추가되었다는 피드백을 화면 어디에서도 받을 수..
벅스뮤직 앱 탐구 1편!벅스 앱은 메뉴와 컨텐츠 영역 사이를 오고가는 UI가 신선하다. 세로형 슬라이드 메뉴 형태를 사용하지 않았다. 오히려 메뉴 영역은 고정이고 컨텐츠 영역이 축소 확장되는 모양을 취하고 있다. 보기도 좋으면서도 편리한 UI를 만나서 반값다. 스틸 이미지로는 느낌을 전달하기 어려워 GIF로 만들어 봤다. 벅스 앱의 디자인은 애플의 iOS 휴먼 인터페이스 가이드를 제대로 적용 시킨듯하다. 콘텐츠에 여백이나 테두리를 두는 대신 전체 화면을 채워 사용했고, 앱의 주요 화면에 반투명 효과를 폭넓게 사용했다. (상단 네비게이션 바, 하단 플레이어 바, 플레이어 화면 등) 플레이어 화면은 아이폰의 기본 음악 앱과 상당히 유사하다. 리스트 뷰 형태의 화면에서도 기능 버튼에 테두리 배제하고 버튼 타이..
아이폰 광고차단 앱 '유니콘' for safari browser (iOS)스마트폰으로 포털에서 뉴스 기사를 읽으려고 본문으로 들어갔다가 광고 이미지가 화면의 대부분을 가려 읽기를 포기한 경험이 있을 것이다.특히 인터넷 미디어에서 제공하는 스포츠연예 기사에 이런 광고가 심하다. 기사 내 텍스트와 사진을 광고가 다 가려버린다. 손을 잘못 놀리면 이상한 사이트로 강제 접속되는 경우도 당하게 된다. 이런 불편을 해소시켜주는 유용한 광고차단 앱 '유니콘'을 소개한다. 아래에서 유니콘 사용 전과 후를 비교해 보자. 광고가 얼마나 심한지 아래로 내려가기 위해 스크롤을 어떻게 해야 할지 난감하다. 유니콘 앱은 굉장히 심플하다. 앱 설치 후 실행하면 스플래시나 특별한 홈 화면도 없다. 광고를 차단하기 위해서는 하단 탭 ..
네이버 날씨 모바일 사이트. 특징 배경이미지 조차 정보를 전달하는 컨텐츠 적절한 스와이프의 활용 알고보면 의미있는 날씨 그래프 1. 배경이미지배경이미지가 시간과 날씨에 따라 달라지는데 그 변화가 섬세하다. 단순히 오전, 오후로 나누고 해, 비, 구름 등의 아이콘을 첨부해서 보여주는 수준이 아니다. 하루종일 구름 낀 날이라도 새벽과 오전, 오후, 저녁의 밝기가 다르게 적용되고, 구름의 종류까지 달라진다. 아마도 구름의 양에 따라 달라지는 것으로 추측된다. 비 내리는 날도 마찬가지다. 가랑비냐 폭우냐에 따라 배경이미지의 비가 달라진다. 이정도면 거의 배경이미지도 날씨 정보를 전달하는 컨텐츠로 봐야 한다. '많은 구름이 예상됩니다' 라는 텍스트보다 더 직관적으로 와닿는다. 나는 배경 속 구름의 양으로 얼마나 ..
모바일 송금 '토스' 앱 탐구 4편! 토스 앱은 최대 이체한도가 30만원이기 때문에 월세나 임대료 등 고액 이체는 다양하게 활용하기 어렵지만 친구들과 모임회비, 직장인 점심값, 공과금 납부 등 소액 이체용으로 충분히 활용가치가 있다. 이체를 하려면 계좌번호를 기억하고 입력해야 하는데, 그 수고를 덜어주는 기능과 폰 분실 시 서비스 이용중지 방법을 탐구해 보았다. 1. 계좌정보와 금액이 적힌 문자메시지를 받았다면모임회비나 점심값 등 이체할 은행과 계좌번호, 금액이 적힌 메시지나 메일을 받은 경우 메시지 내용을 복사하고 토스 앱을 실행시켜 보자. 메시지에 적힌 내용대로 보낼 금액과 은행, 계좌번호를 자동으로 입력해준다. 이때 복사된 메시지 내용에는 은행명, 계좌번호, 금액이 포함되어 있어야 한다. 이체완료 ..
모바일 송금 서비스 '토스' 앱 탐구 3편! 이번에는 계좌번호를 모르는 경우 휴대폰번호로 송금하는 방법에 대해 탐구해보았다. 1. 휴대폰번호로 송금하기 보낼 금액을 입력 후 '받는 분'을 탭하면 [연락처 선택] 화면이 나타난다. 연락처 선택을 처음 이용할 경우 연락처 접근 허용 절차를 거친다. 계좌번호를 알고 있다면 상단에서 [계좌번호 입력]을 이용한다. 계좌번호로 송금하는 방법은 1편을 참고하기 바란다. 연락처 선택에는 1)검색과 2)직접입력의 2가지 방법이 있다. 연락처는 이름과 전화번호 등으로 검색 가능하다. 연락처로 검색한 경우 실명확인 팝업을 거치게 된다. 여기서 실명을 정확히 입력해야 정상적으로 송금이 된다. 직접입력은 휴대폰번호와 이름을 직접 입력할 수 있다. 연락처에 없는 휴대폰번호로 송금..
모바일 송금 서비스 '토스' 앱 탐구 2편!먼저 서비스 이용을 위해 회원가입을 해보았다. 금융서비스라서 그런지 인증 절차가 까다롭다. 전화 ARS 인증과 휴대폰 문자 인증 2단계를 거친다. 1. 서비스 가입처음 실행 시 앱에 대한 이해를 돕는 워크스루로 시작된다. 이체를 한번 하고나면 그 다음부터는 워크스루 화면은 나오지 않는다. 약관동의 절차를 지나면 전화 ARS 인증과 휴대폰 문자 인증을 거치게 된다. 마지막으로 송금암호를 설정하면 가입이 완료된다. 가입을 하고나면 이어서 1원 송금 테스트를 해보라는 메세지 창을 만난다. 직접 테스트를 해보면서 모바일 송금을 경험해 보는 것도 좋을 것이다. 1원 송금 테스트를 해보고 마음에 든다면 정식으로 이용하기 위해서는 계좌등록을 해야 한다. 앱 화면 곳곳에 계좌..
스마트폰으로 자주 이용하는 금융업무 중 하나가 계좌이체(송금)일 것이다. 그런데 은행 앱을 이용해 계좌이체를 하려면 복잡하게 설정된 공인인증서 암호 입력과 지갑에서 보안카드를 꺼내 번호를 입력하는 절차를 거치게 된다. 심지어 어떤 은행은 이체금액의 많고 적음에 상관없이 무조건 전화 ARS 인증을 거쳐야 한다. 보안을 위한 절차라고는 하나 매우 불편한 과정이다. 대안이 없기에 어쩔 수 없이 불편함을 감수하고 은행 앱을 이용해왔다. PC를 켜지 않고 일처리를 할 수 있음에 만족하며. 하지만 이제는 1년에 한번씩 공인인증서를 갱신하고, 스마트폰으로 복사하고, 계좌이체를 할 때마다 긴 암호를 입력하는 일로부터 해방이다. 보안카드를 찾을 필요도 없다. 여기저기서 핀테크, 핀테크 하더니 정말 핀테크 세상으로 진입했..
온라인 간편결제 '페이코' 탐구 6편! 5편에 이어서 페이코 앱에서 더보기 탭의 내용을 자세히 살펴 보았다. '내쿠폰' 메뉴가 눈에 띈다. 오프라인 할인쿠폰을 다운로드 받아 매장에서 할인을 받을 수 있다. 현재는 제공되는 쿠폰 수가 적지만 앞으로는 다양해지기를 기대해본다. 1. 더보기 탭 더보기 탭은 다음의 메뉴로 구성되어 있다. 회원정보관리 로그아웃 PAYCO 포인트 내쿠폰 프로모션 코드 등록 결제 비밀번호 관리 결제수단 편집 환불계좌 관리 소득공제 관리 알림 설정 앱 잠금 설정 앱정보 공지사항 고객센터 PAYCO 사용가이드 각각의 메뉴를 살펴 보자. 페이코 앱은 '간편로그인' 기능을 제공한다. 네이버앱, 네이버블로그앱, 네이버카페앱, 네이버뮤직앱, 네이버지도앱 등 네이버 관련 앱을 사용해보았다면 그 ..
온라인 간편결제 '페이코' 5편에서는 페이코 앱을 자세히 탐구해보았다. 1. 홈앱을 실행하면 다음과 같은 화면을 만난다. 페이코 앱은 한 번만 로그인을 하면, 그 후로 로그인 화면을 거치지 않는다. 또한 '간편로그인' 기능이 있어 로그아웃 후에 다시 로그인 할 때도 비밀번호 입력과정 없이 등록한 아이디만 선택하면 로그인이 된다. 홈 화면에는 이용건수 및 결제금액 등의 정보를 요약해서 보여준다. 상단 우측에 알림이 표시된다. 2. 내지갑 내지갑 탭에는 등록된 카드별 사용내역을 확인할 수 있다. 사용내역은 카드별, 월별로 검색해 볼 수 있다. 네비게이션 바 우측의 + 를 탭하면 신용카드를 추가로 등록할 수 있다. 카드정보 등록 방법은 2편을 참고하기 바란다. '편집' 화면으로 들어가면 몇 가지 기능을 처리할..
온라인 간편결제 '페이코' 탐구 4편! 이번에는 페이코 웹사이트을 탐구했다. 그중 간편결제 서비스를 이용하는데 가장 중요한 MY PAYCO 메뉴와 결제수단 추가 위주로 살펴보았다. 페이코 웹사이트의 메뉴 구성은 다음과 같다. PAYCO 소개 가맹점 이벤트 MY PAYCO 쿠폰 고객센터 웹사이트에는 모바일앱에서 더보기 화면으로 들어가야 볼 수 있었던 '고객센터' 메뉴의 접근성을 높였다. 웹사이트는 스마트폰과 달리 컨텐츠를 느긋하게 읽을 수 있기 때문에 서비스소개와 고객센터 같은 컨텐츠성 메뉴의 중요도가 높은 편이다. 또한 고객센터에 전화하기 전 스스로 해결방법을 찾아볼 수 있는 중요한 수단이기도 하다. 그래서 접근성이 좋은 위치에 메뉴가 배치되었다. '쿠폰' 메뉴는 별도의 도메인으로 분리되어 있다. 지속적..
온라인 간편결제 '페이코' 탐구 3편! 이번에는 페이코 앱에 등록한 신용카드로 PC 쇼핑몰 '알라딘'에서 간편결제하는 과정을 탐구했다. 페이코 앱에 카드정보를 등록하는 방법은 2편을 참고하기 바란다. STEP 1알라딘 결제 화면에서 '페이코 간편결제'를 선택한다. STEP 2페이코 창이 나타나면 로그인 한다. STEP 3페이코 앱에서 사전에 등록한 신용카드가 화면에 표시된다.카드를 여러 장 등록했다면 이미지 좌우의 화살표 버튼을 이용해 결제할 카드를 고를 수 있다.결제금액을 확인하고, 개인정보 제공 동의 후 '결제' 버튼을 누른다. STEP 4카드 등록 시 설정했던 '결제 비밀번호'를 입력하면 결제가 완료된다. 이렇게 간단하다.평소처럼 결제수단에서 '신용카드' 를 선택했다면 공인인증서가 저장된 USB를 ..
- Total
- Today
- Yesterday
- 모바일앱
- 프로토타입
- 카카오페이
- 토스
- 북노트
- UI 디자인 툴
- 벅스뮤직
- 마이크로인터랙션
- 포토샵 CC 2015
- 도미노피자
- 오래가는 UX 디자인
- 디자인과 인간심리
- 모바일송금
- 음악앱
- sketchApp
- 댄새퍼
- 인비전
- 원더리스트
- 보헤미안 코딩
- 네이버뮤직
- 모바일 스케치
- 와이어프레임
- invision
- 스케치앱
- UX 디자인 7가지 비밀
- 페이코
- 피자주문
- 온라인 간편결제
- rindesign
- 리스트뷰
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 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 |