📖

디자인 핵심 원리가 잘 적용된 사례를 찾아보세요.

1️⃣직관적인 디자인

아래 요소 중 2가지를 골라 실제 사례를 찾아보세요.
1. 사용자 행동 유도
2. 정보를 시각적으로 표현
3. 대비 높은 색상 조합
4. 간단한 레이아웃

사용자 행동 유도

- 뉴닉

현재 이슈가 되는 뉴스들을 요약하여 볼 수 있고 뉴스 뿐만 아니라 경제, 문학, 커리어 등 다양한 주제와 관련된 컨텐츠들을 제공한다.

메인 화면의 내비게이션 바에 '시간 없슴'을 통해 들어가보면

오늘 이슈가 된 뉴스들을 빠르게 확인하고 넘어갈 수 있는 화면이 나온다.
더 자세하게 읽고 싶다면 텍스트 버튼을 눌러 확인하면 되고 다음 뉴스로 넘기고 싶다면 하단의 주황색 버튼을 클릭한다.

준비된 내용을 모두 읽었다면 마지막에 위와 같은 화면이 나온다.
이 화면은 매일 업데이트 되는 소식들을 알림으로 받을 수 있도록 설정하는 화면이다.

처음부터 알림 설정을 권유하지 않고 잘 보이는 내비게이션 바에 컨텐츠를 확인할 수 있는 버튼을 위치시키고 그 버튼을 통해 들어와서 컨텐츠를 모두 확인하고 난 후에 행동을 유도한다.

대비 높은 색상 조합

- 마켓컬리

식료품, 화장품, 옷 등 다양한 상품들을 '새벽배송' 이라는 빠른 방법으로 받아볼 수 있다.
시그니처 컬러인 보라색을 인터페이스 전반에 활용한다.

특히 CTA 버튼과 화면을 전화할 수 있는 버튼에 명도 대비를 강하게 적용하여 눈에 잘 띄고 사용자의 행동을 유도하는 것을 확인할 수 있다.

2️⃣ 일관된 디자인

아래 요소 중 2가지를 골라 실제 사례를 찾아보세요.
1. 다양한 디바이스 간의 일관성
2. 쉬운 사용성
3. 디자인 시스템

다양한 디바이스 간의 일관성

- 산타토익

AI를 활용하여 내 예상 토익 점수가 몇점인지 알 수 있고 내 수준에 맞는 문제들을 추천받을 수 있고 오답 설명 등 토익 시험을 위한 기능들을 제공한다.
(왼쪽부터 모바일 - 태블릿 - 랩탑)

똑같은 문제들을 보여주는 화면이다.
가로로 넓은 사이즈의 태블릿과 랩탑은 지문과 문제가 가로정렬 되어있고
세로로 긴 모바일 기기에서는 세로 정렬이 되어있다.

그 차이점 빼고는 모두 동일한 화면을 볼 수 있다.

디자인 시스템

- 지마켓

온라인 쇼핑몰, 오픈 마켓

💡 오픈마켓

기존의 온라인 쇼핑몰과 다르게 다수의 개인 판매자들(multiple third parties)이 인터넷에 직접 상품이나 서비스 정보(product or service information)를 올려 전자 상거래가 이루어지는 곳이다.
출처 : 위키백과

🔗 참고 : https://gds.gmarket.co.kr/

고객과 상품, 고객과 고객을 서로 연결하는 쇼핑 경험의 연결 추제로서 Connection 이라는 핵심 키워드로 지마켓을 표현한다.

일관성, 확장성, 효율성을 위한 GDS (Gmarket Design System)을 소개했다.
디자인 시스템을 활용하여 지마켓 어플의 인터페이스를 표현한 것을 확인할 수 있다.

3️⃣ 가독성을 고려한 디자인

아래 요소 중 2가지를 골라 실제 사례를 찾아보세요
1. 여백 활용
2. 콘텐츠 그룹화
3. 크기와 비율
4. 계층 구조

여백 활용

- 대림미술관

여백을 활용하여 재단에 속한 미술관들에 관련된 정보들을 분류하였다.

콘텐츠 그룹화

- MOMA (The Museum of Modern Art)

뉴욕의 근현대 전문 미술관

모바일 웹보다는 랩탑에서 확인했을 때 좀 더 정돈된 레이아웃을 적용한다.

왼쪽에는 제목이 위치해있고 오른쪽에는 관련된 사진들이 위치되어 한 줄로 그룹화가 잘 되어있어 한 눈에 확 들어오고 구별이 쉽다.