responsive web

LINE

라인 앱 웹페이지 리디자인 및 Accessibility Menu의 적용

OVERALL

project background

데이터센터 화재 사건으로 라인 앱이 채팅 수단 1순위로 급부상하면서, 일본 뿐 아니라 국내에서 더 많은 사용자를 유치할 준비가 필요하다고 보았습니다. 라인 앱이 익숙하지 않은 사용자에게 어떻게 하면 앱 소개 페이지를 더 명확하고 간단하게 보여줄 수 있을까? 하는 생각에 이 프로젝트를 기획했습니다. 또한 소수의 사용자까지 포용할 수 있는 유니버설 디자인을 추가해 차별점을 두었습니다.

PROJECT TYPE

개인 프로젝트

DURATION

4주

TOOL

FIGMA

PRIMARY ROLE

리서치 분석

UIUX 디자인

프로토타이핑

Problem : Lack of Clarity

1. 직관적이지 않은 정보 디자인

중요한 정보의 디자인이 강조되지 않아 라인에서 전하는 메세지를 사용자가 직관적으로 알기 어렵다.

2. 장점은 확실하게 강조하기

채팅 기능이 크게 드러나지 않아 사용자가 정확히 어떤 장점이 있는지 확인하기 어렵다. 라인 앱이 가진 기능을 강조하는 디자인이 필요하다.

3. 불편한 사용성

기업 지원 이미지는 외부로 링크를 연결하지만 안내 표시가 없으며, 서비스의 카드 영역은 칩 메뉴를 강조하고 스크롤 압박을 줄여주어 사용성을 개선한다.

Grid System

전세계적으로 가장 자주 쓰이는 모니터 사이즈 1920px를 기본으로 1020, 768, 425px 등의 모바일, 타블렛 사이즈를 베리에이션하여 반응형을 제작했습니다.

1920px | Desktop

9 Columns | Width 87px | Gutter 20px

1020px | Laptop

9 Columns | Width 87px | Gutter 20px

768px | Tablet

5 Columns | Width 130px | Gutter 20px

425px | Mobile

8 Columns | Width 33px | Gutter 20px

Accessibility Menu

소수의 사용자도 라인 앱에 접근할 수 있는 환경을 위해 Accessibility menu를 기획했습니다. 해외에서 제공되는 SAAS 형태의 서비스를 라인에 적용시켜 그 효용성에 대해 보고자 했습니다.

서비스 분석

1. 서비스가 필요한 프로필을 선택할 때 기존에 세팅된 기능이 적용되는 방식

2. 사용자화할 수 있는 기능들이 분류 없이 나열되어 있거나 한번 더 인지해야 알 수 있는 그룹으로 묶여 있었습니다.

컨텐츠 조절 - 읽기 쉬운 폰트 설정, 문단 정렬 등
컬러 & 디스플레이 조절 - 채도값 조절, 텍스트 컬러 조절 등
네비게이션 조절 - 이미지 숨기기, 무소음 설정 등

메뉴 구성 방식

1. 기존과 동일하게 서비스가 필요한 프로필을 선택하기

2. 감각과 시각적 요소를 중심으로 기능을 분류하여 직관적으로 알 수 있도록 했습니다.

음성 및 읽기 지원 - 음성 지원, 읽기 가이드, 사전 등
디스플레이 조절 - 이미지 숨기기, 색 채도, 마우스 크기 등
텍스트 조절 - 폰트 크기 조절, 읽기 쉬운 폰트 설정 등

High-Fidelity

Prototype example

색 채도 조절 | 낮은 채도, 높은 채도, 무채색

ADHD 프로필 | 읽기 가림개

Design System Setting

라인의 컬러와 폰트는 유지하면서 다양한 Accessibility menu의 기능으로 폰트, 컬러, 컴퍼넌트 디자인을 배리에이션하여 적용하였습니다. 또한 반응형 페이지 제작을 하면서 디자인 시스템에서 관리하고 사용했기 때문에 효율성과 편리함을 경험할 수 있었습니다.

Responsive Web

기본 1920px 디자인을 벗어나지 않은 선에서 반응형 사이즈를 작업했습니다. 사이즈에 따른 기기를 고려하며 폰트의 크기, 레이아웃 등 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 고려했습니다.

Final Product

1. 브랜드 메세지 전달 극대화

같은 메세지를 반복하지 않으면서 ‘Life on LINE’ 대주제를 뒷받침하는 내용의 연결로 이어지도록 디자인했습니다. 한 프레임에는 하나의 메세지만 담았습니다.

2. 쉽게 읽히는 장점

기능 설명을 이름보다 더 크게 강조해 사용자의 감정에 가까이 닿을 수 있도록 수정했습니다. 또한 채팅 기능에서 그라데이션 컬러로 분리해 사용자가 쉽게 시각적으로 인지할 수 있습니다.

3. 사용성 개선

메인 | 주제에 적합한 메인 이미지를 선정하고, 사용자의 기기에 따라 다운로드 가능한 링크를 하나로 제공했습니다. 또한 언어 설정 버튼에서 국기를 추가해 시각적 힌트를 더해 사용자가 쉽게 찾을 수 있습니다.

기업 지원 | 아이콘으로 외부 링크를 표시해 기업 사용자가 해당 페이지를 인지할 수 있습니다.

서비스 | 칩 메뉴를 상단 가로로 배치하고 각 서비스에 대한 설명은 호버할 때 뜨도록 숨겨 스크롤 영역을 줄였습니다. 사용자는 이전보다 더 빠르게 서비스 전체를 확인할 수 있습니다.

Takeaways

라인 웹 페이지를 반응형으로 작업하면서 ‘어떻게 해야 사용자가 어떤 기기로 봐도 같은 내용을 효과적으로 전달할 수 있을까?’를 고민했습니다. 동시에 디자이너와 개발자의 입장에서 통일성있는 디자인을 구현하는 것에 대한 중요성을 깨달을 수 있는 작업이었습니다. Accessibility menu의 디자인은 해외 유튜브 영상, 블로그를 통해 실제 사용자의 간증을 서치했습니다. 에스노그라피 방법을 통해 방구석에서도 사용자 입장에서 몰입하며 프로젝트를 원활히 마칠 수 있었지만, 반대로 직접 조사에 대한 중요성을 깨달을 수 있었습니다. 또한 메뉴에 선택할 수 있는 기능이 한정되어 있어 더 많은 소수의 사용자를 위한 기능을 개척하며 포용력 있는 디자인이 있는 미래에 대해 깊게 생각해보게 된 프로젝트였습니다.

Other Projects

앱 리디자인

신한은행의 신한플레이 앱 리디자인

스타트업 아이템

디자인 취향을 반영한 문구 전문 SNS 플랫폼 앱

케이스 스터디

헤비 웹 유저를 위한 올인원 즐겨찾기 관리 사이트

TISTORY Linkedin

DESIGNER | 2023

© Hyun JI OH