1주차 강의 숙제: 내가 자주 쓰는 서비스 뜯어보기

나는 인스타그램을 주제로 들고와봤다. 

화면을 살펴보고 눈에 띄는 요소를 1~3개 정도 찾아보세요.

홈화면에서 눈에 띄는 것은

1) 사용자들의 프로필 사진 (스토리 표시)

2) 나의 프로필 사진 (스토리 추가)

3) 타 사용자가 게시한 피드

 

크게 이렇게 세 가지를 꼽을 수 있겠다. 

 

1)  1번은 버튼으로 봐야하는 것인가? 요소가 무엇일까? (버튼인 것 같긴 한데....) 

Color: New color mappings and compatibility with dynamic color. Icons and labels now share the same color. Neutral text button has been deprecated.

- instagram의 대표 컬러인 노랑부터 마첸타, 보라까지의 색상을 활용하여 스토리 표시를 적절하게 나타내었음.

- 다만 웹상에서는 저 색상이 아닌 마젠타 단일 색상으로 표시하는게 아쉬움. 

 

- Avoid FAB colors that fail a 3:1 contrast ratio.

- 색채 차이가 얼마 나지 않아 구별이 어렵다. 색약인 분들 혹은 부분 색맹인 분들은 친한 친구 스토리와 그냥 스토리를 들어가기 전까지는 구분하지 못할 것 같다. 

 

2) 나의 프로필은 버튼으로 봐도 될 것 같긴 하다.

누르면 스토리를 올리는 페이지로 넘어가고, 스토리를 올리는 액션을 위해 간편하게 존재하는 버튼이기 때문이다. 

- 다만, 스토리 추가 버튼 중 사진 칸은 왜 있는지 모르겠다. 

- 기본적으로 사진이 설정되어 있기도 하고, 사진 버튼을 눌러도 아무 일이 안 일어나기 때문이다. 

 

3) 3번은 사실 이미지가 있고 아래에 버튼이 딸려있는 컨테이너로 보는게 적합할 것이다. 

굳이 조사를 한다면 아이콘과 버튼에 대한 문서를 찾아보는 것이 적합할 것이다. 

 

3번 중 나는 좋아요와 댓글, 공유하기 아이콘을 기준으로 살펴보겠다.

- 해당 아이콘은 아이콘 종류 중 Standard Icon Button인 것으로 보인다. 

 

 

이렇게 어떤 도형 속에 흰 색으로 아이콘 형태가 드러나는 것이 아니라 그냥 해당 아이콘 자체가 형태로 보이는 것을 의미한다. 

 

Users should be able to understand meaning of the icon

 

좋아요의 의미를 하트를 통해서 잘 대변했고,

댓글의 경우도 기존의 많은 서비스에서 사용하던 말풍선 모양의 아이콘을 통해 쉽게 잘 전달했다.

공유하기가 살짝 헷깔릴 수는 있지만, DM을 통해 전송한다는 점에서 어느 정도 의미가 일치하는 아이콘을 선정했다고 생각한다.