
블로그의 디자인을 대폭 수정했다. 수정하기 전엔 이렇게 생겼었다.

![blog 수정전 ](/images/blog/2202/toomanywords.gif)

디자인에 뭔가 부족한 게 있는 것같고, 애매해서 생각해보니 블로그 대문(첫 화면)에 글씨가 너무 많았다.   
문제는 최근 작성한 글 목록 부분이었다.  

![recent posts](/images/blog/2202/rp.png)

어떻게 수정하지 고민을 많이 했고 awwward 수상작들과 여러 사이트들을 보면서 영감을 (ㅋㅋㅋ) 느끼려고 애썼다. 

그러고보니 내가 원하는 페이지는 노션으로 만든 듯한 깔끔한 페이지였다. 그래서 뚝딱뚝딱 수정을 해보았고.. 바뀐 모습은 이렇다.

![메인 윗부분](/images/blog/2202/redes5.PNG)

## 디자인하며 중점적으로 생각한 부분

### 데스크탑과 모바일로 접속했을 때 느낌이 너무 다르지 않게 하기

나는 웹에서 좌우 여백을 많이 주는 페이지를 좋아한다. 그렇게 하려면 웹-앱의 생김새를 비슷하게 해야했다. 둘의 간격이 커지면 미디어쿼리로 처리하는 부분, 신경써야하는 부분이 늘어나 개발할 때 힘들다.

이러려면 웹에서 봤을 때도 좌우 패딩을 안 주고, 세로로 봤을 때 좌우 여백이 없이 일자로 깔끔하게 내려가는 것이 중요했다.
또 모바일에서 볼 때 폰트가 너무 작으면 이 느낌이 덜 했다. 그래서 max-width로 데스크탑에서 봤을 때에도 모바일과 봤을때 차이가 없도록 하고, 앱에서는 거슬릴 지 않는 정도의 좌우 마진만 주었다.

### 간결하고 깔끔하게

그래서 메인 배경 색을 하얀색으로 잡았다. 원래는 메인의 ```Recent Posts``` 섹션에서 카테고리 별 최근글을 보여주었다. 근데 그렇게 하다보니 카테고리명도 나와야하고 또 내가 한동안 쓰지 않은 카테고리의 글이 나오길래 과감하게 카테고리를 지우고 모든 카테고리의 최근글을 표시하도록 했다.

블로그를 직접 디자인해 만들면서 최근 글 영역의 디자인을 가장 많이 고민했다. 카드 형식으로 할지, 글의 도입부를 살짝 보여줄지, 가벼운 요약(description)을 보여줄지 등.. 근데 첫 화면에 글이 너무 많으면 처음 내 블로그에 들어온 사람이 부담을 느낄 것 같아 제목만 띄우기로 했다.

### 테마는 거미 / 남색

사용자가 보게 될 첫 화면에 책 저지대의 구절을 넣고 싶었다. 빼고 기술적인 내용을 적을까 생각도 했지만, '지금까지는' 내가 추구하는 삶을 잘 보여주는 글귀라 남겨두었다.


저는 디자인이 너무너무 어렵습니다

내 블로그 겸 포트폴리오를 직접 디자인하며 주의한 것, 알게된 것


## 내 생각

중학생 때 스마트폰을 사용하기 시작해서 줄곧 안드로이드를 사용했다. 고등학교를 졸업한 이후에야 아이폰을 쓰면서 애플 생태계에 들어갔다.
신기하게도 아이폰을 쓴 이후로는 내 휴대폰에 대한 불만, 새 휴대폰을 향한 열망이 사라졌는데 그 이유는 '갤럭시는 사용할 수록 잔렉이 잦아진다'는 거였다.
휴대폰을 사용한 기간이 길어질 수록 속도가 느려지고, 버벅거리는 듯 했는데 마이크로인터랙션의 부재때문에 그렇게 느껴졌었다는 걸 이 책 덕분에 알게 되었다.
아이폰이 상대적으로 마이크로인터랙션이 풍부하게 적용되어있어 기기의 처리 속도가 느려지더라도 사용자(나)가 덜 느꼈다.
애플은 철저하게 마이크로인터랙션을 배치해 휴대폰을 조작하는 것을 사용자로 하여금 디지털의 무언가를 조작하는 게 아니라
철저히 아날로그적인, 부드러운 무언가를 만지는 듯한 느낌을 느끼도록 했다.
실제로 사용자가 화면을 슬라이드하다가 맨 끝에 다다랐을 때에나 언제든 절도 있게 딱딱 끊어지지않고 부드럽게 (자연스럽게) 만들었다고 한다.
마이크로 인터랙션은 사용자에게 절대 작지 않게 작용한다.

## 1장: 마이크로인터랙션 디자인

- 휴대폰이 매너모드일 때 알람도 음소거돼야하는가? iOS 휴먼 인터페이스 가이드라인 왈
"음소거 스위치를 켜 놓아도, **사용자가 분명한 의도를 가지고 직접 설정한 소리**는 그대로 재생됩니다."
- **마이크로인터랙션: 제품에서 1가지 사용 사례에 해당하는 짧은 순간, 혹은 한가지만 수행하는 작은 기능
(e.g. 설정변경, 데이터 동기화, 비번 설정, 로그인 등)**
- "디테일은 그저 디테일이 아니라 디자인 그 자체다" / Charles Eames

### 마이크로인터랙션을 적용하면 좋은 때

1. 하나의 작업을 수행할 때
2. 기기들을 서로 연결할 때
3. 단순한 정보를 주고 받을 때(주가, 날씨 등)
4. 진행중인 기능을 조정할 때(TV 채널)
5. 설정 변경할 때
6. 간단한 내용을 작성하거나 확인할 때 (상태바)
7. 어떤 기능을 끄고 켤 때

- 발전 단계 초기 기술과 같이 물건을 쓰는 방법보다 무슨 기능을 수행할 수 있는지가 의미있을 때에는 마이크로인터랙션의 중요성이 상대적으로 적다.
이후 시장 내 경쟁이 강해질 수록 마이크로인터랙션은 중요해진다.

### 마이크로인터랙션의 숨겨진 역사

- 크롬에서는 검색 시 검색어가 위치한 부분을 노랗게 표시
- 원래 스크롤 바는 행 단위로 움직였고, 스티브 잡스 이후 픽셀 단위로 움직이게 됨. + 스크롤하지 않고도 문서의 끝으로 바로 갈 수 있는 화살표 버튼 추가.
- 터치스크린에서 문서를 아래로 스크롤할 때 손가락을 위로 움직여야할까, 아래로 움직여야할까?
애플이 아이폰 발표 이후 natural scrolling(자연스러운 스크롤 방식)을 위해 아래 스크롤 명령의 방향을 위로 올리는 방식으로 바꿈
- **"버튼의 등장으로 인간의 동작은 그로 인해 생기는 움직임과 처음으로 완전히 분리될 수 있게 됐다." / 드루시, '버튼의 역사'** => 동작이 추상적인 의미를 갖게 됨

### 마이크로인터랙션의 구조

아름다운 마이크로인터랙션은 4요소를 포함: `트리거(trigger)`, `동작규칙(rule)`, `피드백(feedback)`, `순환모드(loops and modes)`

1. 트리거: 모든 마이크로인터랙션의 1요소.  
⁃ 아이폰에서 벨소리 끌 때는 사용자가 직접 행동해야함.(수동 트리거) and 이것은 수시로&빠르게 수행해야함 =>
언제나 쉽게 접근할 수 있어야하고 무슨 기능을 수행하는 중이든 간에 바로 켜고 끌 수 있어야함 => 음소거 용 물리적 조작 장치 부착

2. 동작규칙  
⁃ e.g. 전등은 스위치가 다시 꺼질때까지 계속 켜져서 밝은 상태를 유지해야한다.
3. 피드백: 우리가 **보고 듣고 느낌**으로써 시스템의 동작규칙을 이해하게 하는 모든 것  
⁃ '문서'를 실제로 '폴더'에 집어넣지 않고, '이메일'이 '수신함'에 실제로 오는 게 아닌 것처럼 모든 것은
그안에서 벌어지는 상호작용을 우리가 이해하기 쉽게 해주는 은유(metaphor)임.  
⁃ e.g. 스위치 올리면 전구에 불이 들어오는 것, 이메일 앱에 읽지 않은 메시지 개수, 네비게이션의 음성, 알림음, 주문 진행표시 막대 등
4. 순환과 모드

### 디자인 철학으로서의 마이크로인터액션

제품에 마이크로인터랙션을 부여하는 방법

1. 마이크로인터랙션을 그때그때 상황에 따라 고려. 하나하나 어떻게 개선할 수 있을지 등 생각해본다. but 범위 제한이 어려움
2. 복잡한 서비스를 쪼개서 각 하나의 마이크로인터랙션을 중심으로 하는 개별적인 제품의 집합으로 만든다.
**대신 1기능만 제대로 제공해야한다. 다른 기능은 다른 제품으로 만든다.** (MVP: Minimum Viable Product, 최소 요건 제품)
4. 기능 전체를 서로 연결된 마이크로인터랙션들의 조합으로 다룬다.

## 2장: 트리거

⁃ 1990년 대 뉴욕 지하철의 회수권 대신 플라스틱 메트로카드를 도입할 때 당시엔 터치 스크린을 사용해본 사람이 적었음.
그래서 그들은 **자판기의 모든 화면이 한번에 1기능만 수행하도록** 함.(대화처럼 1화면 1질문하도록 디자인 => 모든 화면이 각 1마이크로인터랙션)

⁃ 전체 터치 스크린을 하나의 커다란 트리거로 만듦. 대기화면을 '이곳을 터치하세요'로 해둠. but 사실 화면 아무데나 터치하면 거래 시작. 이 때의 **트리거는 시작 버튼**.
사람들이 거래 시작할 때 그 버튼을 누르는 것을 유도하는 시각적 힌트이자 가짜 어포던스(affordance)

### 트리거의 조작부

⁃ 1동작(빨리 감기 등): 그냥 버튼, 탭, 밀기 등  
⁃ 2동작(켜기, 끄기): 토글 스위치(but 현재 상태가 뭔지 알기 힘듦), 그냥 버튼
⁃ 여러동작: 다이얼

⁃ 정해진 범위 내 연속적인 값 조절(음량 조절): 슬라이드 바나 다이얼  
⁃ 폼(form): 빈 양식보다 이전에 입력된 내용이나 사려깊게 준비된 기본값으로 미리 채워져있어야함  
⁃ 트리거는 언제나 같은 행동을 해야함.

## 3장: 동작규칙

- **"단지 차별화하기 위해서 다르게 만들어진 물건이 더 나은 경우는 거의 없다. 하지만 더 좋은 물건을 만들려고 하면 거의 언제나 차별화되는 물건이 나오기 마련이다." / 디터 람스**
- 동작규칙 디자인 전에 마이크로인터랙션의 '목표'를 가장 단순명료한 형태로 정의해야함. 이때 목표는 과정이 아니라 사용자가 원하는 최종 상태여야함

### 동작규칙이 결정하는 것들

1. 트리거 활성화 시 마이크로인터랙션의 반응. 백지에서 시작하지 말 것. 사용자와 그 맥락에 대한 정보를 활용하면 마이크로인터랙션 개선 가능(e.g. 사용중인 플랫폼,기기, 시간, 주변공간의 소음 수준, 배터리 수명, 사용자의 위치와 방향, 화면 밝기 등)
2. 마이크로인터랙션 진행중 사용자가 중간에 조작할 수 있는 항목. (E.g. 다운로드 취소, 음량 조정 등)
3. 동작 순서와 타이밍 (e.g. 사용자가 검색창에 문자를 입력했을 때만 검색 버튼 활성화)
4. 사용되는 정보와 그 목적
5. 관련된 알고리듬의 구성과 변수
6. 피드백 종류와 제공 시기
7. 마이크로인터랙션의 모드 (e.g.날씨 앱의 날씨 확인 도시 입력 모드- 날씨 확인 모드) 모드는 가능하면 피해라.
8. 마이크로인터랙션의 반복 여부와 빈도
9. 마이크로인터랙션이 종료될 때 생기는 일
⁃ 동작규칙 정할 땐 마이크로인터랙션을 위해 수행해야하는 것들을 떠오르는 대로 적는다. (요구사항 정의 비슷한 느낌) -> 미묘한 디테일 추가. 논리 흐름도를 적어보는 것도 좋음
⁃ 사용자가 취하는 행동을 동사로, 그런 행동이 가능하게 하는 물건을 명사로 적어보라.
(e.g. '슬라이드 바'로 사용자가 '음량을 높이거나 낮춘다') 이때 마이크로인터랙션에 포함되는 명사는 모두 유일해야함. 같은 명사를 2개의 마이크로인터랙션에서 쓰면 그 둘을 하나로 합치는 것을 고려하라. 서로 다르게 동작하는 항목(버튼 등)은 서로 다르게 생겨야함.

### 마이크로인터랙션의 3상태

1. 기본 상태
2. 활성화 상태(사용자와 상호작용중)
3. 갱신된 상태(사용자와 상호작용 끝)

- 기본 선택값을 잘 준비하고 사용자가 선택할수있는 '동작규칙을 바꾸는' 항목을 무자비하다 싶을 정도로 줄여야함. (e.g. 생일 입력칸이 직접 문자 입력 방식이면 유효하지 않은 날짜를 입력할 수 있다. 방식을 드롭다운 메뉴로 바꾸면 예외 상황 방지 가능)
- 이용할 조작 장치, 장치를 제시하는 방법을 잘 결정해야함. 특히 문자 입력칸의 경우 '불가피한 다양성'이라고 불리는, 다양한 조건에서 제대로 동작할 수 있는 능력 필요 (e.g.구글 문서에서 표 삽입할 때 표의 크기를 시각적으로 선택할 수 있는 창)
- 동작규칙의 주요 역할 중 하나는 사용자의 오류를 원천적으로 방지하는 것.(e.g. 애플의 라이트닝 케이블. 앞뒷면이 같아 사용자가 플러그가 뒤집어진 것을 모르고 꽂으려는 애쓰는 상황을 원천 방지) 사용자가 잘못 조작하는 여지를 남기지 않고 디자인하여 오직 시스템이 제대로 반응할 수 없을 때만 오류 메시지를 표시하도록 해라. (e.g. 댓글 입력창에 욕설을 입력하면 '고양이'로 바꾸어 결과 표시)
- microcopy. 레이블이나 안내문 같은 문구. 동작규칙을 이해하도록 함. (E.g. 페이스북의 '좋아요' 마이크로인터랙션) 레이블만으로 충분한 경우에는 절대로 안내문을 사용하면 안된다.
- 안내문에 사용된 표현은 조작부의 명칭과 정확히 일치해야함

## 4장: 피드백

- 슬롯머신의 시각 효과와 음향이 사용자의 몰입을 불러일으키는 것처럼 피드백이 마이크로인터랙션에 개성을 부여함.
- 목적: 사용자가 그 마이크로인터랙션의 동작규칙을 이해하도록 돕는 것. 사용자가 버튼을 누르면 2가지를 표시하는 반응이 있어야함(1. 버튼이 눌렸다는 것, 2. 버튼이 눌림으로 인해 생긴 일)
- 원칙 1: 피드백을 통해 사용자에게 지나친 부담을 주지 않는 것(e.g. 워드에서 이탤릭 글꼴 입력할 땐 커서 자체를 기울여서 표시)
- 원칙 2: 뚜렷한 이유없이 제공하면 안됨. 언제나 사용자를 도와주기위한 메시지를 전달해야하고 피드백을 야기한 사용자의 동작과 그 피드백 사이에 밀접한 관계가 있어야함
- 원칙 3: 최소한의 피드백으로 최대 정보 전달
- 원칙 4: 디자인 과정에서 간과하기 쉬운 부분을 메시지 전달 방법으로 활용(스크롤 바, 커서, 프로그레스 바, 툴팁, 마우스 오버 효과 등)
- 피드백은 마이크로인터랙션에 성격,유머를 주입할 수 있게 된다. 사용자는 사람같은 반응을 좀 더 받아들인다. 불쾌한 골짜기(uncanny valley) 현상처럼 지나치게 개성을 드러내는 것보단 약간만.

### 피드백이 일어나야하는 경우

- 수동 트리거가 작동한 직후, 트리거 조작중, 조작 완료시
- 마이크로인터랙션이나 주변 조건에 중대한 변화를 일으킨 시스템 트리거가 작동했을 때. '중대한' 정도의 판단은 맥락마다 다름.
- 사용자가 정의된 동작규칙의 범위를 벗어나려고할 때 (e.g. 목록을 끝까지 스크롤해서 더이상 표시할 항목이 없는 상황)
- 시스템이 명령을 수행할 수 없는 경우
- 시간이 오래 걸리고 중대한 작업의 진행상황을 보여주는 경우(e.g. 다운로드 수행에 필요한 시간을 어림잡아 표시)
- 애니메이션이 가져야하는 특성: 빠름, 부드러움, 자연스러움(중력, 관성 같은 자연의 법칙을 따를것), 간결함, 목적(단지 보기 좋다는 이유는 안됨)
- 피드백 시 직설적이지 않게, 불안감을 줄이는 문구로, 무엇이 잘못 되었는지와 해결 방법을 함께 제시해야한다.
- 음향 피드백은 사용자가 이전에 들었던 소리와 연관시킬 수 있는 음향이 좋다. (e.g. 휙 -맨위로 올라가는 소리)

## 5장: 순환과 모드

- 모드: 앱이 평소와 다르게 동작하는 특별한 부분. 특정 모드동안은 평소와 다른 기능이 수행된다.
- 순환 loop: 하나 이상의 명령이 반복. (앞으로 loop)
- 횟수 기준 루프: 정해진 횟수만큼 반복
- 조건 기준 루프: 조건이 충족되면 계속 반복(e.g. 인터넷 접속돼있으면 1분마다 새로운 트윗 확인)
- 수집 기준 루프: 주어진 집합에 포함된 모든 항목을 대상으로 실행 후 종료(e.g. 안 읽은 이메일마다 새 메일 개수 표시를 늘려가는 것)
- 무한 루프. 가급적 피해야함
- 개방형 루프: 피드백에 반응하지 않고 그냥 실행되고 종료됨(e.g. 매일밤 10시에 조명 켠다)
- 폐쇄형 루프: 자체적인 피드백 기제가 있어 스스로 행동 조정(e.g. 자동차 엔진 소음의 크기를 확인, 카 스테레오의 음량을 그때그때 조정)
- 가장 강력한 루프는 오랜 기간에 걸쳐 일어나며 시간이 지남에 따라 행동에 대한 피드백을 받아들이는 폐쇄형 루프 = 장기적 루프
- 사용자가 점차 마이크로인터랙션에 익숙해지면 단순하게 한다. (e.g. 트윗 올릴때 처음엔 'post'라는 문구가 있다가 이후엔 체크 표시만 남는다)

### 장기적 순환 loop

- Long wow(오래 가는 감탄). 시간이 지남에 따라 마이크로인터랙션을 조정함으로써 점차 사용자에 맞춰 변화하는 듯 보이거나
심지어 완전히 새로운 경험으로 여겨지도록 하는 것 (e.g. spotify에서는 플레이리스트에 곡이 추가된 날짜를 시간이 오래됐을 수록 옅게 표시,
구입 희망 목록에 든 상품을 매주 알려줌, 내 정보 기억하기 체크 박스)

## 6장: 마이크로인터랙션 프로젝트의 사례

### 이미 만들어진 제품에 마이크로인터랙션을 개선 또는 추가하는 법

- 이 경험을 특징적인 순간으로 만들 필요가 있는가? 기억에 남아야하는가?
- 백지에서 시작하려면 어떻게 해야하는가? 사용자나 맥락에 대해 알고 있는 정보를 사용해 마이크로인터랙션을 개선할 수 있는가?
- 해당 ML에 든 정보 중 가장 중요한 부분은 무엇인가? 사용자가 첫눈에 확인해야하는 정보가 있는가?
- 사용자의 실수를 예방하고 있는가?
- 익숙해진 사용자를 위해 보이지 않는 트리거를 사용할 수 있는가?
- 문자와 아이콘을 사용자가 이해할 수 있는가? 마이크로카피는 큰 소리로 알려줄 정도로 중요한 내용인가? 유머 감각을 더할 수 있는가?
- 애니메이션을 추가해 좀 더 동적으로 만들 수 있는가? 화면이나 상태를 전환할 때 사용자를 방해하지 않으면서 다음 단계를 표시할 수 있는 방법은 없는가?
- 피드백을 제공할 때 음향이나 촉감 등 다른 방식을 추가할 수 있는가?

### 마이크로인터랙션의 검증

완료율, 마이크로인터랙션의 전체 수행 시간, 특정 단계에 걸린 수행 시간, 단계의 개수, 클릭/탭/선택의 개수,
시스템 오류(ML 스스로)의 횟수, 사용자 오류의 횟수

## 읽으며 인상적이었던 마이크로인터랙션들

1. MailChimp에선 메일의 가로 크기를 침팬지의 팔로 표현함. 메일침프에서 제공하는 600px를 넘어가면 침팬지의 팔이 끊기는 그림을 보여줌
2. 이메일 배경에 웃는 얼굴의 해가 있다. 꼭 기분 좋은 메시지가 아니어도 임의로 웃는 얼굴을 표시하는 것은 좋지 않은 피드백 사례임


버튼의 등장으로 인간의 동작은 그로 인해 생기는 움직임과 처음으로 완전히 분리될 수 있게 됐다.

UXUI

'UXUI'에 관한 글들을 모아봤어요.

내 블로그 겸 포트폴리오를 직접 디자인하며 주의한 것, 알게된 것

마이크로인터랙션