도리스 블로그

이번 포스팅에서는 인비전의 Fixed Footer와 Screen as Overlay를 활용한 예제를 소개합니다.Fixed Footer를 활용해서 화면 맨 위로 이동하는 인터랙션 구현하기 (Top Button) 화면 하단에 TOP 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 화면의 맨 위로 스르륵 이동합니다.Fixed Footer, Screen as Overlay를 활용해 플로팅 메뉴 버튼 구현하기 (Floating Menu Button) 화면 하단에 메뉴 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 보조 메뉴가 위에 나타나고, 다시 탭 하면 사라집니다. 보조 메뉴가 나타난 상태에서는 배경이 살짝 연해집니다. 준비이번 예제는 아..

인비전으로 만든 프로토타입을 공유하는 방법은 크게 2가지다. 소셜미디어 계정에 공유하는 방법과 URL 또는 EMBED 코드를 통한 공유 방법이다. 현재 공유 가능한 소셜미디어는 슬랙과 드리블이다. 향후 비핸스도 추가될 모양이다. 여기서는 소셜미디어 공유 방법은 소개하지 않는다. 여기서는 URL로 프로토타입을 공유하고, PC 브라우저로 접속해서 테스트하는 방법 위주로 소개한다. 프로토타입을 URL로 공유하면 PC나 스마트폰 등 어떤 디바이스에서든 브라우저를 통해 접속해서 테스트 할 수 있다. 그런데 스마트폰 브라우저에서 접속할 경우 코멘트를 작성할 수는 없다. 코멘트를 주고받으며 커뮤니케이션 하려면 PC 브라우저에서 접속해야 한다. PC 브라우저로 접속한 모습URL로 접속하면 처음 상태는 테스트 모드다. ..

네이버 스마트에디터 3.0 (Web ver.)접속 초기 화면에 레이어 팝업으로 주요 도움말을 보여준다. 스마트에디터 화면 내에 이 동영상(가이드)을 바로 열어볼 수 있는 조그만 장치가 있으면 좋을 듯하다. 카카오 브런치 Brunch (Web ver.)글쓰기 화면에 접속 시 글자편집에 관한 도움말을 애니메이션으로 보여준다. 그 후 사용자가 기능을 처음 사용할 때 그에 해당하는 도움말을 레이어 팝업으로 보여준다. 미디엄 Medium (Web ver.)처음 접속 시 화면 하단에 도움말을 보여준다. 좌우 화살표를 클릭해서 다음 내용을 볼 수 있다. 일부 도움말은 애니메이션을 통해 이해를 돕고 있다. 도움말 맨 마지막에는 이 도움말을 다시 보는 방법에 대한 도움말이 나온다. 끝.

노트정리, 할일목록, 메일 등 폴더 또는 카테고리 기능이 포함된 목록 관리 웹서비스의 사용자 도움말 표현 사례를 모았다. 도움말이 보여지는 시점 및 위치, 도움말로 설명할 내용의 범위에 대해 탐구가 필요하다. 노트정리 ‘에버노트 Evernote’할일목록 ‘원더리스트 Wunderlist’메일 ‘인박스 Inbox by Gmail’ 에버노트 웹서비스계정 생성 후 처음 만나게 되는 화면이다. 하단의 아이콘 옆에 툴팁이 계속 보여진다. 계정관련 내용이 있을 거라는 힌트를 준다. 목록은 비어있지 않다. 에버노트 측에서 사용법을 작성해 놓은 8개의 노트가 목록을 채우고 있다. +(새 노트)를 클릭하면 글쓰기 화면으로 전환된다.이때 화면 레이아웃이 바뀌는데 좌측에 보이던 것들이 사라져 혼란스러울 수 있는 사용자를 위해..

지난달에 10시간 정도 실습과 함께하는 픽세이트 강좌를 수강했다. 간단한 프로토타입은 인비전으로 만들 수 있지만 그보다 좀 더 자세하게 만들 수 있는 프로토타입 도구에 관심이 생겼다. 픽세이트 pixate는 스마트폰용 어플리케이션에 최적화된 프로토타입 제작 도구다. 탭, 스크롤, 드래그 등의 인터랙션과 무브, 스케일, 페이드 등의 애니메이션을 적용할 수 있다. 픽세이트는 레이어 기반의 도구라서 요소별로 인터랙션과 애니메이션을 각각 지정할 수가 있다. 그리고 인비전 보다 애니메이션 효과를 조금 더 다양하게 만들 수 있다. 애니메이션 별로 조절 가능한 속성도 몇 가지 제공하고, 조건을 설정해 그에 따라 반응하도록 할 수 있다. 또한 하나의 요소에 여러 개의 애니메이션 효과를 중첩해서 적용 가능하다. 그것을 ..

관련 글브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 모바일앱 글쓰기 글쓰기 화면은 3가지 항목으로 구성된다. 제목소제목내용 글보기 화면은 제목과 커버이미지를 담고 있는 상단과 하단의 내용으로 구분할 수 있는데 상단을 꾸미기 위해서는 글쓰기 화면의 ‘제목’을 이용하면 된다. 브런치 모바일앱에서 상단영역으로 만들 수 있는 유형은 다음과 같다.브런치 모바일앱 커버이미지 유형 배경배경이미지가 화면에 꽉 채워지도록배경이미지가 정사각틀에 맞춰 채워지고 아래에 내용의 일부가 보여지도록배경이미지 없이 제목만 표시 (배경색 선택 가능, 선택하지 않으면 흰색 배경) 제목 정렬왼쪽이나 가운데 중 선택할 수 있다.세로 정렬은 임의로 정할 수 없다. 배경이미지 세로 사이즈에 따라 정해진다. 커버이미지 만들..

《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 댄 새퍼 (2015.5) 마이크로인터랙션의 네 가지 요소 ①트리거, ②동작규칙, ③피드백, ④순환과 모드 중 NOTE1에서 트리거와 동작규칙에 대해 정리했었다. 여기서는 동작규칙부터 이어서 나머지 부분을 정리하려고 한다. 관련 글 《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 NOTE 1 1. 동작규칙 제한된 선택 항목과 세심한 기본값동작규칙을 최소한으로 하는 가장 좋은 방법은 사용자의 선택을 제한하는 것이다. 마이크로인터랙션 전체에 걸쳐 기본 선택값을 잘 준비해 두면 사용자가 중간에 뭔가를 선택해야 할 필요조차도 없을 것이다. 모든 마이크로인터랙션이 하나의 행동을 하고, 그 행동이 다음으로 연결된다. _88주요한 선택 항목은 딱 하나만 있는 ..

인비전 invision에서 반응영역 hotspots 지정한 뒤 할 수 있는 것반응영역 지정 후 Link To에서 목적지를 선택한다.목적지는 추가해 놓은 화면 이미지 중에 하나가 될 수도 있고, 현재 화면의 다른 부분으로 이동이 될 수도 있고, 프로토타입 이미지 순서상에서 이전 화면이나 다음 화면이 될 수도 있다. 다음의 옵션 중에서 선택 가능하다. Another point on this screen 현재 화면의 다른 부분으로 이동Link Back / Close (last screen visited) 현재 화면을 닫음(현재 화면이 열리기 직전 화면이 나타남)Screen as Overlay 이미지를 선택해서 현재 화면 위에 겹침 (팝업이나 햄버거메뉴 등 화면의 일부만 가리며 등장하는 이미지를 화면 위에 띄울..

스케치앱에서 도형 Shape을 선택 후 드래그해서 확대나 축소를 하면, 도형에 적용했던 테두리 두께 Border와 모서리 곡선값 Radius은 그대로 유지된채 도형의 크기만 조정된다. 도형을 다루다보면 때로는 테두리와 곡선값이 내가 확대나 축소한 만큼 동일하게 늘어나거나 줄어들기를 원할 때가 있다. 그 방법을 소개한다. 도형의 크기조절 방법 3가지1. 드래그 2. 인스팩터에서 Size값 변경 3. Scale툴 이 중에서 드래그와 Size값으로 크기를 조절하면 Border와 Radius는 원래 설정을 그대로 유지한다. 그런데 스케일 Scale툴을 사용해서 크기조절을 하면 Border와 Radius도 같은 비율로 조절된다. Scale툴로 크기조절을 하면 Radius, Border값도 같이 조절된다.

***덧붙이는 글 2017.5.11이 글이 작성된지 1년이 지났습니다. 그 사이 인비전의 변화가 눈에 띄더라고요. 제가 인비전 관련하여 작성한 내용중에 다음 3가지 부분에서 변화가 있었어요. 아래 글의 스크린샷과 실제 인비전 서비스 화면에서 차이가 있으니 혼란을 겪지 않으셨으면 합니다. 새 프로토타입 생성 화면 : 모양 변경Screen as Overlay : 설정 옵션 추가프로토타입 공유 도구 : 임베드 코드 제공 기능 삭제 인비전 집중 스터디 4회차. 그동안 드문드문 인비전 Invision에 로그인해서 훑어보고, 이미지 몇 개 추가해서 기본 제스처와 트랜지션을 적용해 링크를 걸어보며 맛만 보았었다. 그러면서 생긴 몇 가지 궁금증을 체크만 해두었는데 지난주부터 집중적으로 자세히 들여다보았다. 그간의 스터..

웹 기반 프로토타이핑 서비스를 제공하는 인비전 invision에서 출시한 UI 디자인 보조 툴 크래프트 craft를 사용해 봤다. 크래프트는 요소복제와 더미데이터 삽입을 간편하게 해주는 스케치앱과 포토샵의 서트파티 프로그램이다. 크래프트에는 가이드 생성 기능과 아직 오픈되지 않은 프로토타이핑 기능도 포함되어 있는데 여기서는 요소복제와 더미데이터 삽입 기능을 소개한다. 스케치앱 플러그인 컨텐츠 제너레이터로 더미데이터 자동 삽입의 맛을 본지 며칠 만에 크래프트를 알게 되었는데 기능이 훨씬 좋다. 삽입되는 이미지의 느낌도 마음에 든다. 텍스트 더미 데이터에 한글도 사용할 수 있다. 다운로드 및 설치다운로드 https://www.invisionapp.com/craft 다운로드 후 실행하면 어도비 크리에이티브 클..

《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 댄 새퍼 (2015.5) 책에는 마이크로인터랙션이란 이것이다. 라는 식의 명확한 정의가 나오지는 않는다. 곳곳에서 많이 사용되고 발견되는 추상적인 어떤 개념에 마이크로인터랙션이라 이름을 붙이고, 경쟁이 심한 요즘이기에 그것이 중요한 이유를 경험 디자인과 연결 지어 이야기하고, 그 개념이 가지고 있는 네 가지 요소와 특징을 설명한다. 그리고 책 전반에 걸쳐 그 추상적인 개념이 관여되어 있는 사건과 사례들을 소개한다. (PC와 스마트폰, OS, PC 소프트웨어와 모바일앱, 조명, 교통카드 자판기, 토스터, 슬롯머신, 식기세척기 등등) 이 책을 읽으면 내가 발견한 것이 마이크로인터랙션이라 할 수 있는지 아닌지를 구분하고, 마이크로인터랙션을 디자인하기 위해 ..

스케치앱 Sketch 3.7 스케치앱 스터디 2주차원하는 모양을 자유자재로 만들 수 있도록 숙달시키기 위해 핀터레스트에서 맘에 드는 이미지를 골라서 따라 만들어 보았다. 내가 주로 쓰는 효과는 거의 다 만들 수 있었다. 1. 스케치앱으로 그래픽 요소를 만들기 위해 참고할 점 원형 라인 그래프 만들기 원형 라인 그래프를 그릴 때 패스 편집 모드로 들어가서 자르기 원하는 구간에 맞춰 앵커를 추가하고 Scissors 를 사용해 잘라내면 편하다. [Layer - Paths - Scissors] Outer Glow 효과 만들기스위처를 만들 때 포토샵에서의 습관대로 Outer Glow를 찾았는데 없었다. Shadow에서 X, Y 좌표값을 0으로 하고, Blur값만 적용하면 아우터글로우 효과를 만들 수 있다. 필요한..

스케치앱 Sketch 3.7.1 스크린샷 스터디를 위해 스케치앱 3.7 트라이얼 버전을 설치해두었다. 그 후 며칠 만에 3.7.1 버전 업데이트가 있었고, 가격이 129달러로 올랐다. 무료 사용기간이 끝나면 결제하려고 했는데 그만 가격이 올라버렸다. :-( 며칠 전만 해도 99달러.이틀 동안 스케치 3 사용자 매뉴얼 한국어 번역본과 스케치앱 공식 홈페이지의 비디오 튜토리얼을 보며 감을 잡았다. 그리고 샘플 화면을 만들어보았다. 실제 써봐야 그 맛을 제대로 느끼고 숙달 시간도 앞당길 수가 있다. 스케치앱의 특징 중 가장 마음에 드는 점은 고정적인 UI 요소와 반복적으로 사용되는 요소를 심볼로 만들어 재사용하는 것이다. 심볼은 하나를 수정하면 같은 심볼을 사용하고 있는 모든 부분에 수정 내용이 동시에 반영된..

브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 홈상하 스크롤로 컨텐츠 사이를 이동한다. 이전, 다음 전환 시 기존 화면의 크기가 축소되면서 사라진다. 배경이미지와 텍스트는 시간차를 두고 등장한다. 웹사이트의 패럴랙스 스크롤처럼. File drawer, Card index, iOS safari 글본문읽기 상태로 돌입하면 글 내용과 관련 없는 요소들은 화면에서 사라진다. 최상단의 상태바까지 생략되는 넓은 화면. 내용을 읽다가 위로 스크롤 하면 화면 상단에 툴바가 나타난다. 티스토리 앱 메뉴좌측에서 메뉴가 나타나면서 기존 화면의 크기가 축소되면서 어두워진다. 검색 매거진 글목록 시작 화면에 매거진 제목, 작성자, 관련태그, 구독신청, 인기도 표시(구독수, 공유수)가 있다. 매거진 느낌을 살..

모바일웹 쇼핑몰 상품소개 화면 - 탭 메뉴 화면 상단 고정 쇼핑몰 상품소개 화면에서 아래로 스크롤 시 앞단의 기본정보 다음에 상품관련 컨텐츠를 유형별로 구분해서 탭 메뉴 형태로 나누어 보여준다. 상품상세정보, 후기및평가, 질문답변, 판매자정보 등 3~4개 탭 메뉴로 구성된다. 대게 탭 메뉴는 첫 등장 지점부터 화면의 끝까지 상단에 고정으로 위치한다. 위로 스크롤 해서 탭 메뉴 시작 지점보다 더 위로 올라가게 되면 화면에서 사라진다. 스크롤 시 탭 메뉴 화면 상단 고정 사례스토어팜11번가인터파크G마켓옥션롯데닷컴 내비게이션 바와 탭 메뉴가 같이 고정되는 경우 cjmall 탭 메뉴 화면 상단 고정 애니메이션 gif 스토어팜 11번가 인터파크 G마켓 옥션 롯데닷컴 cjmall 내비게이션 바 화면 타이틀 표시 관..

스마트폰 화면에서 컨텐츠 영역 넓게 사용하기. 스마트폰의 작은 화면에서 컨텐츠 영역을 넓게 사용하기 위한 방법으로 화면 상하단의 영역을 숨겼다가 보여주는 식의 방법이 사용된다. 화면을 위로 밀면 상단 영역이 축소되거나 내비게이션 바로 변화되면서 최소화 되고, 주요 컨텐츠를 볼 수 있는 공간이 늘어난다. 다시 화면을 아래로 당겨 컨텐츠의 최상단으로 이동하면 최소화 되었던 상단 영역이 원래데로 돌아온다. 상단 컨텐츠 영역이 축소되는 사례 (iOS) 네이버 블로그 (mobile web) 유튜브 (mobile app) 상단 비쥬얼 영역이 내비게이션 바로 전환되는 사례 (iOS) 네이버 밴드 (mobile app) 벅스뮤직 (mobile app) 브라우저 자체적으로 상하단 축소, 숨김 사례 (iOS) 사파리 브라..

《디자이너, 직업을 말하다》 마이크 몬테이로 (2014.12) 저자가 웹디자이너로 일하다가 뮬 디자인 회사를 차리고 10년간 운영하면서 겪은 일들과 거기서 얻은 지혜가 유쾌한 문장으로 쓰여져 있다. 저자의 칼같은 성격이 느껴지지만 동료와 후배 디자이너에 대한 애정이 뚝뚝 묻어난다. :-) 내용은 뒷표지의 카피처럼 ‘디자이너가 갖추어야 할 비즈니스 커뮤니케이션의 모든 것’이다. 예술가의 환상에 빠진 디자이너 '디자이너란 어떤 사람인가?'사람들은 누군가를 추천하는 일을 좋아한다 '새로운 고객을 찾는 법'나쁜 고객, 좋은 고객, 이상한 고객 '적절한 고객을 고르는 법'협상은 하되 가격경쟁에 뛰어들지는 마라 '디자인 가격 정하기'계약서가 없으면 신뢰도 없다 '계약서 작성하는 법'당신의 프로세스가 최고의 프로세스..

《UX 디자인의 7가지 비밀》 박지수, 김헌 공저 (2013.3)NOTE 2 이 책의 후반부에는 태스크 기반 인터랙션 디자인 방법을 적용하여 대형마트 앱을 설계하는 전 과정이 상세히 설명된다. 비밀4. 태스크 지식을 전문 사용자 수준으로 이해한다 비밀5. 사용자 요구사항과 설계원칙을 반영해서 인터랙션을 디자인한다 비밀6. 페이퍼 프로토타입을 직접 만들어서 테스트한다 비밀7. UI 시나리오를 작성하여 개발자, 디자이너와 효율적으로 커뮤니케이션 한다 비밀4는 카드소팅 방법을 이용해서 태스크 분석 및 사용자의 목표에 맞는 태스크를 도출하는 것에 관한 내용이다.카드소팅 방법으로 태스크 도출 태스크 시나리오 작성 예 비밀5는 대형마트 앱을 인터랙션 디자인해나가는 전체 과정을 소개한다.태스크구조 (사용자 요구사항)..

대형마트 앱의 설계를 태스크 기반 인터랙션 디자인 방법을 적용하여 기획하는 전 과정을 상세히 설명한 책. 《UX 디자인의 7가지 비밀》 박지수, 김헌 공저 (2013.3) 비밀1. 시스템 관점에서 UX 디자인을 넓게 본다 삼색볼펜과 대형마트, 도로 교통 시스템 등을 예로 들어 UI, 인터랙션, UX의 개념과 차이를 이야기 한다. UI는 입력장치와 출력장치 그리고 출력장치를 통해 제공되는 정보를 말한다. 삼색볼펜 예볼펜 UI의 입력장치 세 가지 색 중 하나를 선택하는 데 쓰는 슬라이더, 볼펜을 쥘 때 손가락이 아프지 않게 해주는 고무 패드, 볼펜심을 교환할 때 볼펜 중간 부분을 돌려 빼게 해주는 나사 구조물, 볼펜을 옷 주머니에 고정시키는 데 쓰는 클립볼펜 UI의 출력장치 위의 입력장치를 사용자가 사용했을..