숙명여자대학교 인터랙티브미디어디자인I 수업 교재 예시 조사 및 발표 자료.

1. 인터랙티브 미디어디자인
Chapter # : 58
진행 표시줄에 숫자로 된 인디케이터를 제공하라
읽을만한 시간이 확보된다면, 진행 표시줄에 숫자로 된 (퍼센트) 인디케이터를 제공하라.
남은 시간에 대한 정확한 추산을 표시할 수 없다면, 퍼센트로 되돌아가라.
예시), Adobe Creative
Cloud deskTop app 사례
Adobe 툴을 다운받기
위한 데스크탑 앱 Adobe
Creative Cloud는
프로그램 다운로드
진행도를 스피닝
인디케이터와 함께
퍼센트로 표시해 정확한
설치 진행률을 알 수
있다.
예시) Interpark Ticket
mobile app 사례
트래픽 문제로 인해
오래 대기해야 되는
티켓팅 대기화면에서,
많은 사람들의 접속으로
인한 대기 상황을 잘
표현한 ‘대기순서’ 로
작업(접속) 진행도를
제공한다.

2. 인터랙티브 미디어디자인
Chapter # : 59
명암비는 당신 편이다
텍스트와 배경 간의 명도 대비는 적어도 최소 4.5:1 의 비율을 지켜야 한다.
적절한 명암비는 정상 시력 사용자는 물론, 시력장애자의 사용도 가능하게 한다.
예시), Melon mobile
app 사례
Melon mobile app의
홈 화면에서, 가장
어두운 텍스트의
색상 코드는
#b4b3b3d(진회색)으로,
배경 색상
#111111(검은색)과
9.02 : 1 명도 대비율을,
포인트 색상 그린
텍스트는 #35af3b 로
7.3 : 1 대비율을 띈다.
예시), Toss mobile app
사례
The Toss의 혜택
화면에서 가장 밝은
텍스트의 색상 코드는
#5b646b(연회색)으로,
배경 색상 #ffffff(흰색)과
6.03 : 1 의 명도
대비율을, 포인트
색상인 파란 텍스트의
색상 코드는 #3e78bc로
배경 색상과 4.54: 1
대비율을 지니고 있어
모든 텍스트가 배경과
구분되어 조화롭게
읽힌다.

3. 인터랙티브 미디어디자인
Chapter # : 60
‘플랫 디자인’을 사용해야 한다면 컨트롤에 시각적 어포던스를 추가하라
컨트롤의 시각적 어포던스-행동 유도성 요소-는 모든 사용자 인터페이스에서 여전히 필수적이다.
미니멀리즘과 사용성 간에 균형을 찾아라.
예시), 윤디자인
Website 사례
The 윤고딕 폰트로
유명한 한글 글꼴
제작사 윤디자인의
홈페이지는 단순하고
깔끔한 플랫 디자인
형태이면서도, 마우스
커서의 위치에 따라
바로바로 화면에
자리잡은 텍스트가
모션과 명도대비를 통해
강조되어 시각적
어포던스 또한 놓치지
않고있다.
예시), Behance
mobile app 사례
비핸스 모바일 어플은
전반적으로 깔끔하고
텍스트가 거의 없지만,
홈 화면을 스크롤링함에
따라 강조되는 프로젝트
탭의 그림자 및 크기
변화 모션으로 화면에
새롭게 등장하는
프로젝트 콘텐츠를
클릭하도록 행동을
유도하고 있다.

4. 인터랙티브 미디어디자인
Chapter # : 61
애매모호한 기호를 피하라
다른 것과 구분되며 사용중인 다른 패턴과 충돌하지 않는 아이콘을 선정하라.
기존에 많이 사용되는 아이콘이 있다면 굳이 다시 디자인할 필요가 없다. 아이콘을 설명해야 한다면, 이는 아이콘으로서의 효과가 없는 것이다.
예시), Netflix, Disney+
mobile app 사례
넷플릭스와
디즈니플러스 모바일
어플 모두 브랜드
아이덴티티가
뚜렷함에도 불구하고,
검색 기능의 아이콘에
있어서는 여러 분야에서
전반적으로 많이
사용하고 있는
돋보기 아이콘을 활용해
기능을 안내하고 있다.
예시), KakaoTalk,
Instagram
mobile app 사례
메신저 어플 카카오톡
/ sns어플 인스타그램
모두 종이비행기라는
익숙한 모티브를
활용해 ‘다른 이에게
사적 메시지를
보낸다’는 기능을
안내하고 있다.