1. 버티컬 스택 (Vertical Stack)

• 세로줄로 콘텐츠를 정렬한다. 아래로 스크롤되는 형식이다.
• 가로길이 보다 세로가 긴 모바일 기기에서 활용하기 유용하다.
• 언제 사용하나요?
  • 거의 대부분의 모바일 웹에서 사용한다. (게임과 같은 몰입형 콘텐츠 제외)
• 어떻게 활용할까요?
  • 상단에 중요한 내용을 넣는다.
  • 섬네일 이미지를 잘 활용할 수 있다.
  • 버튼이나 텍스트의 크기가 커지거나 언어가 변경되어 길어지면 양 옆으로 분리시킨다.

2. 필름 스트립 (Filmstrip)

• 스와이프 하여 화면을 전환해서 콘텐츠를 배치한다.
• 언제 사용하나요?
  • 종류나 분류가 같은 콘텐츠들이 대등한 위치에 있을 때 사용한다. (ex: 도시별 날씨, 이달의 베스트셀러 등)
• 어떻게 활용할까요?
  • 내비게이션 등을 넣지 않기 때문에 공간을 줄여서 더 넓게 공간을 활용 가능하다.
  • 스와이프로 화면을 넘길 수 있다는 것을 유저가 자연스럽게 알 수 있어야 한다.

3. 터치 툴 (Touch Tools)

• 유튜브, 넷플릭스처럼 동영상 스트리밍 사이트의 전채 화면 보기를 생각하면 된다.
• 유저가 화면을 터치할 경우 기능들을 보여준다.
• 언제 사용하나요?
  • 동영상이나 게임 등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
• 어떻게 활용할까요?
  • 툴들은 반투명하게 보여주는 것이 몰입감을 최대한 해치지 않는다.

4. 하단 내비게이션 (Bottom Navigation)

• 어떤 화면에서든 볼 수 있는 내비게이션을 하단에 배치한다.
• 언제 사용하나요?
  • 동영상이나 게임등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
• 어떻게 활용할까요?
  
  • 상단은 화면 공간에서 매우 중요한 요소이다. 그래서 아래에 내비게이션을 넣어서 중요한 내용이 들어갈 공간을 확보한다.

5. 컬렉션 (Collections)과 카드 (Cards)

• 항목을 선택할 수 있는 사진과 카드를 나열하여 선택할 수 있게 한다.
• 언제 사용하나요?
  • 복잡한 내용을 표시할 때 사용한다. 기사나 블로그 포스트 등이다.
  • 유저들의 클릭 유도를 끌기에도 좋다.
• 어떻게 활용할까요?
  
  • 섬네일을 왼쪽에, 텍스트를 오른쪽에 붙여 정렬한다.
  • 화려한 색을 사용해도 좋다. 모바일의 작은 화면에서는 화려한 색도 잘 어우러진다.

6. 무한 리스트 (Infinite List)

• 유저가 스크롤하면서 계속 새로운 콘텐츠를 보여주는 방식이다.
• 언제 사용하나요?
  • 모든 콘텐츠에 거의 적합하다.
  • 만약 콘텐츠가 많아지면 검색 기능이 유용하다.
• 어떻게 활용할까요?
  
  • 로딩이 될 때 인디케이터를 함께 사용하면 UX가 좋다.
  • 어느 정도 위치에 스크롤이 내려가면 다음 콘텐츠를 로딩한다. 굳이 모든 데이터를 다 받아올 필요는 없다.

1. 모바일 우선주의

• 대부분의 기업들은 모바일 경험을 우선으로 설계한 후에 반응형 디자인으로 디스플레이 사이즈에 맞게 확장되는 디자인을 가지고 있다.
• 디자인 물론, 기능까지 나눠서 만들 수 있다.

2. 모바일 디자인의 어려운 점

1. 작은 화면 크기
   • 메뉴, 정보 등을 길게 보여줄 공간이 없다.
   • 부가 요소를 다 없애고, 중요한 부분만 남겨두고 나머지는 숨겨놓자.
2. 다양한 화면 너비
   • 모바일 기기들 마다도 다 사이즈가 다르다.
   • 키보드가 달려있다거나, 요즘에는 옆으로 열리거나 아예 반으로 접혀 버리는 화면도 있다.
   • 각 기기마다 모바일 버전을 다르게 만들 수 도 있고, 최대한 화면의 너비를 효율적으로 사용하는 것이 포인트가 된다.
3. 터치 스크린
   • 터치 스크린의 사이즈와 키페드의 사이즈도 생각을 해서 디자인해야 한다.
   • 그리고 링크의 사이즈도 충분히 커야한다. (안드로이드 9mm, IOS 약 8mm) 그리고 사이 간격을 조금 줘서 손가락으로도 클릭이 쉽도록 설계한다.
4. 문자 입력하기
   • 키패드의 사용을 줄일 수 있도록 하자.
   • 자동완성등의 기능을 이용할 수 있다.
5. 물리적 환경의 제약
   • 휴대폰은 꼭 지정된 장소에서 사용하지 않는다. 그래서 사용자의 물리적 환경을 생각해서 만들어야 한다.
   • 예를 들어 사용자의 환경에 따라 달라지는 빛의 정도가 달라질 수 있으므로 가독성을 더 생각한 텍스트를 만들거나, 흔들리는 버스 등의 장소에서 사용할 경우를 대비해 '팻 핑거'를 이용해 실수를 바로잡을 수 있도록 한다.
6. 사회적 영향과 집중력의 한계
   • 모바일기기는 유저가 PC 상황보다 집중을 덜 하게 된다. 다른 일을 하고 있으면서 휴대폰을 사용하는 경우가 많기 때문이다.
   • 그러므로, 사용자가 산만하다는 것을 가정하고 디자인하는 것이 도움이 된다.
   • 태스크 순서를 쉽고 빠르고, 재진입이 쉽도록 만드는 것이 포인트이다.

3. 모바일 디자인에 접근하는 방법

1. 유저의 니즈를 파악하자
   
   • 유저들의 모바일 기기를 어떨경우에 이용할까?
   • 잠깐 짬이 났을때, 빠르게 정보를 검색해야 할 때, 다른 사람들과 연결할 때 등등이다.
   • 이런 상황을 가정하고 디자인 하는 것이 중요하다. 그래서 화면을 탭 하는 횟수를 최소화하고, 가로로 콘텐츠를 배치 하기보다 세로로 배치하여 정렬하기 등을 할 수 있다.
2. 모바일 기기의 하드웨어 이용하기
   • 모바일 기기는 손쉽게 카메라, 위치 인식, 음성인식, 진동등의 기능을 사용할 수 있다.
   • 서비스의 이용에 적절하게 이용하여 더 편하게 서비스를 이용할 수 있게 만든다.

1. 문제의 발단

• 모든 프로젝트를 진행하면서 어떤 폰트를 사용할까? 에 대한 고민을 정말 오랜 시간 많이 했다.
• 느낌으로 결정하는 폰트보다, 상황에 맞는 가독성 좋은 그리고 예쁘기까지 한 폰트를 알아보자.

2. 세리프(Serif)

• 글자의 끝에 장식선과 곡선이 존제하는 체. 빽빽한 글을 읽을 때 눈의 피로를 줄여줘 가독성에 용의 하다.

3. 산세리프(Sans serif)

• 세리프와 달리 끝에 장식선이 없다. 깔끔한 디자인과 크기가 작아도 가독성이 좋아서 인터페이스 등에 사용하기 용의 하다.

4. 디스플레이(Display)

• 폰트 사이즈가 클 때 유리하다. 그래서 제목이나 로고 등의 용도로 사용할 때 용의 하다.
• 하지만 가독성이 낮아 텍스트가 많거나, 사이즈가 작으면 사용해서는 안된다.

5. 고정폭(Monospace)

• 글자의 실제 크기와 상관없이, 모든 글자가 동일한 가로길이를 보여준다.
• 주로, 텍스트를 자세하게 표현할 수 없는 경우 사용한다.

6. 세부적인 조절에 필요한 용어

• 크기 : 일명 pt. 일반적으로는 css에서 font-size로 조절하는 부분이다. 대부분 10px이하는 가독성이 너무 떨어져서 추천하지 않고, 12px정도가 정석이다.
• 줄 간격 : css에서 line-height로 조절하는 부분이다. 글자 간의 세로 길이를 뜻하며, 어느 정도 떨어져서 자연스럽게 텍스트가 읽히도록 한다. 너무 많이 띄어놓으면 자연스럽게 읽히지가 않고 강조하는 느낌이나, 아예 다른 섹션의 글처럼 느껴질 수 있다.
• 자간(tracking)과 커닝(karning) : 자간은 css에서 letter-spacing으로 조절하는 부분이다. 글자 하나하나 간의 사이 간격을 말한다. 커닝은 css에서 font-kerning으로 조절하는 부분이다. 대부분의 브라우저는 auto로 설정되어 있고, 사용하거나(normal), 사용하지 않는(none)을 속성으로 가지고 있다. 글자 내부의 공백(자간보다 좁은 글자 하나에 해당하는 빈 공간)을 조절한다.
• 폰트 페어링(font pairing) : 한 가지 디자인에서 폰트를 여러 가지 조합한다. 너무 다른 폰트를 같이 사용하면 어색하다.
  • Tip: 같은 폰트 중에서 굵기나 볼드, 이탤릭체 등을 사용해서 다른 느낌을 주어서 같은 폰트이지만 미묘하게 다른 느낌으로 사용할 수 도 있다.
  • Tip: 형태가 비슷한 폰트는 같이 사용하는 것을 피하는 것이 좋다. 세리프와 산세리프를 사용하면 비슷하지만 다른 느낌으로 사용할 수 있다.
• 가독성 : 얼마나 잘 읽히는가에 관한 것이다. UX에서 가장 중요한 요소이다.
  • Tip: 컴퓨터 화면에서는 작은 폰트로 텍스트를 표시할 경우가 많은데 이때, 산세리프가 유리하다.
  • Tip: 이탤릭체나 필기체 등을 너무 남발하면 가독성은 최악이다. 적당히 필요한 곳에만 사용한다.
  • Tip: 가끔 구분이 힘든 글자들이 섞여있는 폰트들이 존재한다. (ex: e, c, d, o 등이 주로 헷갈리게 표현될 수 있다) 이런 부분까지 확인하고 사용하는 것이 옳다.
  • Tip: 대문자는 제목에서 정도만 사용하자. 읽기가 쉽지 않다.

사실 이부분은 디자인에 가깝다. 하지만 개발자가 알아서 나쁘지 않은 부분이다. 가독성 부분은 UX에서도 매우 중요한 부분이며, 여러 가지 폰트를 다양하게 적용시켜 보면서 최선의 선택을 하는 것은 디자이너와 협업하기 전에도 필요하기 때문이다. 아래에는 참고하거나 폰트를 얻을 수 있는 사이트를 적어 놓는다. 물론, 가장 중요한 '저작권' 문제가 있다. 대부분 폰트를 다운 받을때 확인 할 수 있도록 적혀있다.
꼭 사용이 가능한 것인지 확인하고 사용하자!

1. 정보 구조?

• '프레임워크'라고 할 수 있다. 사용자가 디자인적인 측면이 아니라 사용에 편리하도록 보여줄 정보들의 위치 등을 정하는 것이다.
• 사용자의 니즈를 파악하고 쉽고 편하게 누구나 이해할 수 있는 용어를 사용하며, 진행의 플로우를 잘 제공한다. 마치 상품을 판매하는 사람이 상품을 매력적으로 소개하는 것 과 같다.
• 이때, 우리는 유저가 어떻게 이 서비스를 사용할까? 를 회원가입부터 회원 탈퇴까지 모든 과정을 유저의 입장에서 생각하면서 만들게 된다.

2. 접근법

• 유저에게 어떤 정보를 어떤 부분에서 보여줘야 더 편하게 서비스를 이용할 수 있을까를 고민한다.
• 정렬하는 방식이나 시점, 분류방식 등을 이용 할 수 있다.
• 디자인 레이어 

  표현층(presentation layer) : UI  디자인, 편집 디자인, 특정 컴포넌트

  기능, 인풋과 아웃풋 : 인터랙션 디자인, UI 패턴

  데어터와 내용 : 정보 설계, 내비게이션 패턴

• 이처럼, 보이는 부분과 데이터를 보여주는 부분을 나눠서 생각한다. 가장 아래에 있는 레이어가 가장 중요한 부분을 차지하고, 아래를 탄탄히 쌓아서 올려나가야 한다.

3. 콘텐츠를 분류하는 법

• 정보를 필터링하거나 검색결과등을 보여줄 때 데이터를 분류하는 기준으로 쓸만한 것 들이다.

1. 위치(Location)
   • 국가, 도시 등의 지리적 위치를 이용한다.
   • 사용자에게 자신의 위치를 알려줘야 한다.
2. 가나다순(Alphabetical)
   • 매우 보편적인 정렬.
   • 어디든지 사용할 수 있어서 편하고 보기 좋다.
3. 시간(Time)
   • SNS의 피드 등이 해당한다. 가장 최근에 생성된 피드가 가장 최상단으로 올라오게 된다.
   • 이처럼 오름차순, 내림차순으로 정렬이 가능하다.
4. 카테고리(Category) or 필터(Facet)
   • 콘텐츠를 주제별로 묶은 카테고리를 만들어 이용할 수 있다.
   • 같은 주제로 묶인 항목들이기 때문에 정보를 더 깔끔하게 찾아볼 수 있다.
5. 위계(Hierarchy)
   • 큰 범주가 그 아래 더 작은 범주를 포함하고 있을 경우 이용할 수 있다.
   • 예를 들어, '아시아의 국가'로 선택하면, '한국', '일본', '중국'등으로 나타낼 수 있다.
   • 따로 주제의 한계는 없다. 어떤 범주가 되었든, 큰 범주가 더 작은 범주를 포함하고 있다면 모두 사용할 수 있다.
6. 숫자(Number)
   • 가나다순과 비슷하게 숫자로 이루어진 목록이 있을 때 사용 가능하다.
   • 숫자로 이루어져 있으며, 의미가 있는 숫자 데이터의 경우 사용하면 사용하기 가장 편하다.