회사에서 진행하고 있는 TFD(투명플렉서블디스플레이) 과제의 일환으로 인터랙션 패턴 사이트를 만들어 사내에만 공개하였는데 이번에 일반에게 공유하려고 합니다. http://www.ixpatterns.com/ UI 디자인 패턴 얼마전 pxd talks 시간에 현업에서 새롭고 혁신적인 인터랙션 디자인을 하는 방법이 있는지 질문이 오갔는데요. 대부분의 인터랙션(좁은 의미의)은 새롭지 않습니다. 바퀴를 새로 발명하지 않는 것처럼 가급적 기존 인터랙션을 차용하여 재활용합니다. 사용자에게도 익숙한게 좋으니까요. 물론 기존의 방식이 맥락에 잘 부합하지 않는다면 새로운 방식을 고민해 볼 수 있겠지만 새로운 것을 찾는 노력은 해결(인터랙션 방식)보다는 무엇이 문제인지, 왜 그렇게 해야 하는지에 좀 더 비중을 두는 것이 도..

최근 모바일 앱이나 모바일 웹, 웹사이트에서는 화면 요소의 애니메이션이나 트랜지션 효과(*이하 UI 애니메이션)들이 많아지고 있습니다. 메뉴를 불러오는 것에서부터 시작해서, 페이지를 전환할 때, 혹은 토글버튼 같은 디테일한 부분에도 효과들이 들어가죠. pxd story에서 소개한 적이 있는 pull-down refresh는 그 대표적인 사례라고 할 수 있습니다. 이를 통해 UI 애니메이션은 시각적인 즐거움을 넘어서 기능을 올바르게 표현해줄 수 있는 수단이라는 것을 생각해볼 수 있습니다. 그리고 이런 UI 애니메이션들도 패턴화 되어가고 있습니다. UI 애니메이션, 요즘 유행하는 트렌드 요즘 Dribbble에서는 이런 UI 애니메이션을 보여주는 GIF Animation이 유행인 것 같습니다. 이제 '스큐어모..

UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴을 다룬 웹사이트 모음을 정리해 보았습니다. 링크 모음을 모은 것이라서 서로 중복되는 항목들이 있을 수 있습니다. 또한 pxd 팀블로그의 UI 패턴과 가이드라인에 대한 글들을 모아 보았습니다. 하단 링크 참고바랍니다. (모바일 버전에서는 링크가 보이지 않으니, 모바일 화면으로 보시는 분들은 웹 버전으로 변경하셔서 확인하시기 바랍니다.) 이 외에도 UI 패턴을 다룬 웹사이트가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다. 관련 글 ▷ UI 패턴과 원칙을 다룬 도서 모음 ..

UI 기획을 하는데 있어서 UI 패턴과 원칙을 이해하는 것은 건축가가 구조를 이해하는 것과 같이 기본적이면서도 중요합니다. 또한 패턴과 원칙을 통해 일반적인 디자인 문제를 다루는 광범위한 해결방안으로 적용할 수 있습니다. UI 패턴과 원칙을 다룬(일부를 다룬 책도 포함) 도서 모음을 정리해 보았습니다. 본 도서는 pxd 라이브러리 에 구비되어 있으며, 제 유저스토리북에 모아두었습니다. :) 이 외에도 UI 패턴과 원칙을 다룬 도서가 있다면 공유 부탁드립니다. 업데이트 하도록 하겠습니다. 관련 글 ▷ UI 패턴과 원칙을 다룬 도서 모음 20+ (현재 글) ▷ UI 패턴을 다룬 웹사이트 모음 UI 패턴과 원칙을 다룬 국내 도서 모음 (무작위순) 1. 웹 폼 디자인 루크 로블르스키 저 | 민은식, 김성은 역 ..

1탄 기본적인 전통 UI 용어와 2탄 최근 웹에서 많이 사용되는 UI 용어에 이어, 이번에도 웹과 앱에서 많이 사용하는 UI 용어를 좀 더 알아보도록 하겠습니다. 관련 글 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 1. 라이트 박스(Light Box) 팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라..

글을 시작하며... 이번 포스팅에서도 1탄-기본적인 전통 용어-에 이어 UI디테일 용어를 소개해보려고 합니다. 각 제조사의 가이드라인, 서적, 사전을 찾아보면 유사한 의미인데도 다르게 불리는 경우가 많습니다. 어떻게 불리느냐보다는 유사한 점과 다른 점을 비교 분석하며 자신만의 것으로 만드는 과정이 중요하다고 봅니다. 관련 글 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 ▷ UX 신입 디자이너가 알아야 할 UI디테일 용어 4탄 1. 증분 탐색 (Incremental Search) Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고..

그리 오래 전은 아니지만 UX라는 분야에 처음 입성했을 때, 머리 속에 가득 찬 아이디어를 우리가 흔히 부르는 Wireframe에 옮기는 데 애를 먹었던 기억이 있습니다. 그림은 대충 그려지는 데 정작 내가 그리고 있는 것이 무엇인지 '정의'를 내릴 수가 없었던 탓이지요. 이처럼 기획자라면 누구나 UI규격서를 설계해 본 적이 있을 것입니다. 이것은 UI기획자와 디자이너 간, 혹은 UI기획자와 개발자 간의 일종의 약속이자 물리적인 결과물입니다. 그렇기 때문에 모든 약속은 명확한 정의가 바탕이 되어야 합니다. 그래야 작업자 간의 원활한 커뮤니케이션을 이끌 수 있으니까요. 이번 포스팅에서는 원활한 커뮤니케이션을 위한 기본적인 조건인 UI컴포넌트 용어를 정리해보려고 합니다. 시리즈의 첫 번째로 가장 기본적인 전..

글을 시작하며... Apple iOS6로 업데이트되면서, 모바일 앱스토어도 대폭 업데이트 되었습니다. 본 글에서는 iOS6 모바일 앱스토어 업데이트의 장점 및 특징에 대해서 소개하려고 합니다. 'Everything that’s wrong with the App Store in iOS 6' 글에서는 iOS6 앱스토어에서의 문제점을 이야기하고 있습니다. 이 글을 참고하시면, 균형잡힌 시각으로 UI에 대해서 생각해 볼 수 있을것으로 기대합니다. 새롭게 업데이트된 iOS6 모바일 앱스토어의 장점/특징 1. Pad, apple TV화면과 일관성있는 UI 화면 구성 그림1) Pad, TV와 일관성있는 UI 화면 구성 그림2) 홈 화면 변경 iOS6 모바일 앱스토어에 처음 진입하면 등장하는 메인페이지에서 큰 변화를 ..

글을 시작하며 [01] Band (이미지출처 하단 명기) Micro SNS의 등장 이후 특정 그룹을 타겟팅한 SNS가 등장했고, Group형 SNS도 등장했다. 카카오톡(지인간의 채팅), 카카오스토리(지인간의 사진 공유 SNS), 카카오아지트(그룹간의 SNS)의 포지셔닝을 보면 카카오의 전략이 다각도로 이루어졌다는 것을 알 수 있다. (관련 기사 : http://me2.do/FfD7ct2) NHN도 그룹 SNS 성격의 모바일앱 Band를 내놓고 발빠르게 움직이는 모습이다. Band 서비스의 정확한 시작은 알 수 없으나, SNS의 미투밴드에서 그 출발을 미루어 짐작할 수 있다. 미투밴드는 미투데이 사람들끼리 친목을 도모하기 위한 공개(혹은 비공개)형 소모임이다. (미투밴드 : http://me2.do/Gi..

뮤직 플레이어에서 현재 재생목록은 어떤 방식으로 생성될까요? 지금 한번 뮤직 플레이어 켜보시고 어떻게 생성되는지 간단히 한번 테스트를 해 보시죠. (로컬 플레이어와 스트리밍 플레이어 둘 다 해보세요.) Task 1. 페이지에서 원하는 곡을 하나 선택하여 재생합니다. (1Tap or 2Tap) Task 2. 재생된 화면에서 현재 재생목록으로 진입합니다. Check List) 처음 페이지 표시되었던 항목과 같은가요? 선택한 곡 정보만 표시하고 있나요? Task 3. 곡 재생을 유지하고 다른 리스트 페이지로 돌아가서 다시 다른 곡의 항목을 선택합니다. Task 4. 다시 재생된 화면에서 현재 재생목록을 진입합니다. Check List) 다른 리스트로 바꿔 표시되었나요? 이전에 선택했던 곡 정보가 유지되고 있나..

1. 탭 전환 방식에 관심을 가지게 된 계기 : iOS 용 Chrome이 나왔다고 하여 사용해보았습니다. Chrome의 전체적인 사용성에 대한 언급은 따로 하지 않겠습니다.(워낙 분석을 잘 해놓은 분들이 많으니까요) 어쨌든. 필자는 Chrome의 여러가지 특징 중에서 'Finger Action'을 통한 탭 전환 방식에 대해서 주목하게 되었습니다. Chrome에서는 One Finger Swipe를 통한 탭 전환 방식을 제공하고 있습니다. 두 개 이상의 탭이 열려있으면 좌/우 Swipe를 통해 탭 이동을 할 수 있도록 하는 기능입니다. Chrome의 Swipe 탭 전환 방식은, 간단한 동작으로 화면 전환이 가능하고 Content area의 어느 위치에서든 Finger Action이 적용되기 때문에 특정한 버..

먼저 현재 우리나라에서 가장 많이 쓰고 있는 3사 음악서비스 App을 예로 첫 화면에서 어떤 정보를 가장 우선으로 제공하고 있는지 보도록 하겠습니다. 1. 최신 앨범정보를 제공하고 있는 '멜론뮤직' 멜론뮤직의 첫 화면에서 가장 눈에 띄는 것은 앨범 아트와 함께 제공되는 '최신 앨범' 정보입니다. 새롭게 발매된 앨범을 소개하고 음원을 들어볼 수 있도록 유도하는 전형적인 마켓 방식이라 볼 수 있습니다. 사실 최신 앨범이란 레이블을 사용하고 있지만 새로 나온 몇 가지 음반을 제공사에서 추천해 주는 방식이라 프로모션에 가까운 형태라 볼 수 있을 것 같습니다. 2. 실시간 차트 정보를 제공 하고 있는 '엠넷뮤직' 엠넷은 최신 앨범 보다는 비교적 신뢰가 높은 '실시간 차트(곡)' 정보를 첫 화면에서 제공하고 있습니..