Coursera - Build Dynamic User Interfaces (UI) for Websites 수료

 

 

 

 

Google UX Design - 전문 인증서의 6번째 코스인 Create High-Fidelity Designs and Prototypes in Figma를 수료했다.

 

수강 기간: 3월 25일 ~ 4월 4일 (약 2주간, 주 3회 2시간씩 진행)

 

이번 코스는 반응형 웹사이트를 만드는 코스이다.

 

---

 

목차는 다음과 같다.

 

1. 반응형 웹사이트란?

• 반응형 웹사이트가 필요한 이유
• 모바일 앱과 반응형 웹사이트의 차이

2. 정보 구조 설계

• 일반적인 웹사이트 구조 탐색
• 사이트맵 구축

3. 와이어프레임 그리기

• 일반적인 웹사이트 레이아웃 탐색
• 종이 와이어프레임 그리기

4. 반응형 웹사이트 그리기

• 반응형 레이아웃 그리기
• 화면에 따라 레이아웃을 조정하는 방법
• 반응형 레이아웃에 많이 쓰이는 컴포넌트 탐색

5. 와이어프레임 개선

• 접근성 향상하기
• 게슈탈트 원리 적용

 

---

 

 

코스 초반에는 반응형 웹사이트와 네이티브 앱을 비교하는데, 둘의 장단점은 다음과 같다.

 

 

위 장단점 역시 선택에 있어 중요한 사항이지만, 나는 이것보다 사용자가 어떤 환경에서 더 많이 쓰는가? 를 가장 중요하게 꼽고 싶다. 이동 중이거나 네이티브 기능이 필수적이라면 앱이 맞을 것이고, 근무 중에 컴퓨터로 사용하는 환경이라면 반응형 웹사이트가 더 좋은 선택지이다. 그리고 프로덕트를 만드는 사람들이라면 본인의 핸드폰에 어떤 앱들이 깔려 있고, 그 중 몇개를 사용하는지 점검해볼 필요가 있다. 앱스토어에는 수만개가 넘는 앱이 있지만 그 중 다운로드하여 사용되는 비율은 극히 적고 다운로드라는 것 자체가 굉장한 허들로 작용한다. 그러나 반응형 웹사이트는 다운로드 없이 url에 접속하는 것 만으로도 사용이 가능하다.

 

그렇기에 제품 개발 초기에는 MVP를 적은 비용으로 빠르게 반응형 웹으로 구축하고, 사용자가 늘고 앱의 필요성이 대두되면 그 때 앱을 만드는 것이 좋은 방법이라고 생각한다.

 

현재 근무 중인 회사도 1년간의 사용자 데이터를 분석했을 때 거의 모든 유저가 근무 시간에 데스크톱으로 접속하여 이용하기에 앱 제작은 전혀 고려 없이 반응형 웹의 사용성을 높이는 쪽을 목표로 잡고 있다. (이런 사용자 데이터 조사를 통해 선택에 대한 근거를 마련하는 것이 매우 중요)

 

 

 

또한 코스 중간에 웹사이트의 구조 모델에 대해 알려준다.

 

내가 작업한 3개의 사이트 중 주문 사이트 Portal은 Sequential model이고 웹사이트는 Matrix model, 백오피스인 SIMS와 GEBRA는 Database model에 해당한다. 당시에는 이런 구조 모델 정의에 대해 알지 못하면서도 어떤 방식으로 테스크를 달성해야하는지 고민 끝에 구조를 짰는데 여기서도 사이트의 목적에 따라 구조를 짜라고 나와있어서 안심이 되었다. 

 

그러나 매트릭스 모델은 까다롭고 사용자가 길을 잃기 쉬우니 네비게이션 위치를 고정하여 길을 잃지 않고 원하는 페이지를 쉽게 탐색할 수 있도록 보완해야한다는 점도 다시 일깨울 수 있었다. 

 

이런 점이 이 강의의 최대 장점이라 생각한다. 실무를 하며 어떤 논리 없이 그냥 그렇게 했던 것은 다 어떤 근거와 이유가 있는데, 그 논리성을 강의에서 배우며 획득하는 느낌?ㅎㅎ

 

 

---

 

 

이 코스에서는 실무 파트가 70% 이론 파트가 30% 정도의 비율을 보인다.

실무 파트에서는 반응형 웹사이트를 그리는 방법에 대해 안내한다. 그러나 그냥 반응형을 그리는 법이 아니라, 접근성을 고려하여 그리는 법을 알려주는데 다음 요소들이 있다.

 

1. 탐색 순서 (마우스가 아닌 키보드 탭 등으로 유저가 탐색 시 좌측 상단에서 우측 하단의 흐름 유지)
2. Hierarchical headings (H1,H2,H3 등을 기재하는 것. 개발에서는 시멘틱 마크업이라 한다)
3. Rable (alt text랑 같은 개념)
4. 색상 대비 (일반적으로 텍스트와 배경은 4.5:1 이상의 명암비를 가져야함)

 

디자인 시 위 4가지를 챙겨 디자인한다면 이후 pagespeed insight와 같은 접근성 측정 툴에서 100점을 받을 수 있다. 그리고 이런 접근성 향상은 사용자가 화면을 읽거나 이용할 때 콘텐츠의 의미를 더 잘 이해할 수 있게 되어 필수적으로 챙겨야 하는 부분이다.

 

최근 작업한 웹사이트 점수.

 

또한 화면 크기에 상관없이 컴포넌트의 위치가 고정되어 있는 것을 권장하는데, 그 이유는 사용자가 다른 디바이스에서도 익숙한 경험으로 사용할 수 있기 때문이다. 여기의 예시로 구글맵의 검색창 위치를 소개한다.

 

 

위와 같이 다양한 디바이스에서도 주요 컴포넌트의 위치를 일관성 있게 설정해야 한다. 그래야 사용자가 익숙한 위치로 자연스럽게 사용하게 된다고 설명하고 있다.

 

 

마지막으로 반응형 웹사이트 디자인 후 연결이 자연스러운지 피그마 상에서 확인해볼 수 있는 좋은 플러그인을 추천한다.

Responsive라는 플러그인인데, bp 사이 연결 테스트를 즉각적으로 해보고, 연결이 어색한 부분을 개발 전 수정할 수 있다.

 

 

 

코스 7 리뷰 보기 >