brunch

라이킷 55 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 어드밴스랩 Nov 20. 2019

페이퍼에서 디스플레이로,
AX디자인의 확장

author - 이돋지,윤쯔ㅣAX디자이너

화자 둘(이돋지 와 윤쯔)은 전 회사부터 함께한 동료이다.

커머스 회사에서 처음 만나 줄곧 인하우스 운영 디자인을 해오던 우리는 어느덧 햇수로 7년째 소중한 인연으로 함께하고 있다. ~~(윤쯔는 경쟁사로 한번 이직을 하였지만. tmi)~~

이번 이야기는 같은 운영인 듯 다른 PlusA의 AX디자이너로서 3년째 애정(또는 증)을 쏟고 있는 삼성화재 운영을 Latte는 말이야~ 같은 씨도 안 먹힐 이야기는 접어두고, 운영을 넘어선 AX디자이너의 성장기를 이야기해 보려 한다.

AX란 말이야~

온라인 AX의 시작

삼성화재 AX디자인의 첫 시작은 2017년 4월, 온라인 프론트 개편이었다.

기존 삼성화재의 홈페이지는 10년 가까이 큰 변화 없이 가끔 부분 개편만 진행해왔던 터라, 디바이스별 모두 상이한 디자인으로 하나의 브랜드라 보기 다소 어려울 정도로 제각각으로 디자인되어 있는 문제점이 있었다.

익스큐즈미?

우리가 프론트 개편을 시작할 즈음, 내부적으로 브랜드의 일관된 통합 운영을 위해 만든 가이드 BISG((Brand Identity System Guideline)가 마무리 단계에 들어서 있었다. 우리가 지향하는 AX(Advance eXperience)의 궁극적인 목표는 고객접점의 모든 매체의 일관된 운영 관리를 통한 고도화 이기 때문에 오프라인에 적용된 브랜드 에센스(컬러, 아이콘, 일러스트 등)를 온라인에도 반영하여 통합적인 일관성을 높임과 동시에 사용성을 개선하는 게 우리의 미션이었다.

온라인 부분 개편이라고는 하나 쉽지만은 않은 작업이었다. 가장 큰 난제는 디바이스별 다르게 제작된 디자인의 기준점을 찾는 것이었다. 또한 전체 개편이 아닌 부분 개편이다 보니 서브페이지와의 통일성을 맞추는 일, 그리고 어디까지 디자인을 바꿔야 하는지에 대한 명확한 기준이 없는 상태에서 브랜드 에센스를 녹여 통합된 브랜드 아이덴티티를 보여주는 일은 우리를 끊임없이 고민하게 만들었다. (네~ 다음회의)

우선 디바이스마다 다르게 들어가 있는 아이콘과 포토스타일, 컬러 등을 BISG를 기준으로 조금씩 정리해 나가기 시작했다. 시각적인 비주얼 개선은 물론이고 점점 모바일로 유입되는 고객들이 증가한다는 점과 실사용 고객들의 연령대가 낮지 않다는 점을 고려해 폰트 사이즈와 이미지를 크게 사용하여 가독성을 강화하였다. 뿐만 아니라 삼성화재 사이트에서 다양한 형태의 콘텐츠를 폭넓게 수용할 수 있도록 효율적인 운영방안 개선도 중요한 포인트였다.

개편된 프론트

프론트 개편과 함께 시작된 삼성화재 운영 업무는 마치 새로운 성을 쌓아가는 기분이었다. 공부를 하지 않고선 이해하기 힘든 방대한 보험 내용과 더불어 손실된 원본 파일들, 저마다 다른 페이지들의 기준이 되어줄 운영 가이드도 제작해야 했다.

먼저 다소 어려운 보험 내용을 조금 더 효과적으로 전달하기 위해 보험상품 페이지에는 일러스트와 아이콘을 활용하는 방향으로, 컬러는 BISG에 가이드화된 RGB 컬러 값이 있지만 실제 온라인 환경에서 시각적 피로도가 높다는 문제점이 있어 '장애인 차별 금지법' 테스트를 거쳐 저시력자, 고령자들도 온라인 환경에서 컬러를 인식하기 용이하도록 낮은 채도의 새로운 RGB값을 도출하였다. 이렇게 우리는 하나하나 문제점을 파악하여 단순 운영이 아닌 AX디자인으로써 계속해서 발전하며 나아가는 중이다.

BISG 컬러 > 새로 도출된 온라인컬러

브랜드 개편에 따른 또 다른 운영 업무의 시작

AX디자인을 한 지 2년째, 손에 일이 어느 정도 익어가던 중 2018년 하반기에 삼성화재 온라인 전체 개편이 타 업체를 통해 진행되었다. 부분 개편이 아닌 전체 개편으로 텍스트마저 이미지화하던 구 방식을 탈피하고 웹 표준 및 접근성을 고려해 디자인과 함께 시스템 전체를 개선하는 프로젝트였다. 개편 후 사용성은 개선되었으나 삼성화재만의 브랜드성이 잘 두드러지지 않는다는 점이 아쉬운 부분으로 남아, 우리는 다시 운영 업무를 넘겨받으면서 삼성화재 에센스를 녹여 브랜드성이 잘 노출될 수 있도록 다시 한번 프론트 개편을 진행하였다.

(좌) 개편 전 (우) 개편 시안

기존 BISG는 오프라인을 기반으로 만들어진 가이드였기 때문에, 온라인에서도 조금 더 다양하게 활용 가능하도록 프론트 개편과 동시에 온라인 가이드를 추가 정립하는 작업을 내부적으로 진행 중이다. 폰트를 시작으로 컬러, 아이콘, 인포그라피 등 온라인에서 실제 사용 중이지만, 기존 BISG만으로는 아쉬운 부분을 조금 더 깊이 있게 채워 넣는 방향으로 보강하였다. 그중 아이콘 부분에 대해 이야기해보려 한다.

컬러 아이콘

기존에 선으로만 사용되었던 아이콘을 화면 전환이 빠른 온라인에서는 조금 더 무게감을 줄 필요가 있다는 삼성화재 내부적 요청으로 인해 전체 리뉴얼 진행 중 컬러 버전도 함께 제작되어 사용하고 있었다. 기존 아이콘에 대한 히스토리를 모르는 상태에서 제작되다 보니 삼성화재 아이콘 제작에 있어 시초가 된 봄길 모티프가 빠진 점과 가이드가 아닌 다른 컬러를 사용하고 있는 점이 아쉬워 가이드를 보완하며 추가적으로 컬러 아이콘 개선 작업도 함께 진행하였다.

우선 약 360개 정도의 컬러 아이콘 중 모티프가 없는 아이콘들을 추려, 기존 아이콘들과 통일감 있게 사용 될 수 있도록 봄길 모티프를 적용하여 새로 제작하는 작업부터 진행하였다. 그와 동시에 컬러는 삼성화재만의 따뜻한 봄의 이미지를 전달할 수 있도록 채도를 낮춘 가이드 컬러를 활용하였다. 개선 과정에서 아이콘을 완전히 새로 제작한다기보단 기존 스타일에 맞춰 리터칭 해주는 방향으로, 브랜드 통일성에 기준을 다시 한번 확립해주는 것이 목적이다. (기존 아이콘 제작기는 여기에서 확인할 수 있다.)

개선 ~ ing

온라인 환경에 최적화된 AX를 위해

AX디자이너로서 가장 흐뭇했던 순간은 삼성화재의 실무진들의 변화를 체감할 때가 아닌가 싶다. 삼성화재는 그동안 도식화 위주로 커뮤니케이션 해왔기 때문에 일러스트와 같은 다양한 브랜드 에센스를 적용한 디자인을 처음에는 조금 낯설어했던 것이 사실이다. 하지만 이제는 역으로 브랜드 에센스가 적용된 디자인을 먼저 요청하곤 한다. 시간이 걸리고 논의가 복잡해지더라도 과정 속에서 현업과 내부 구성원들을 꾸준히 설득시키고 함께 고민해온 결과이다.

이제는 삼성화재 실무진이나 우리 AX디자이너가 고민하는 지점도 함께 발전하였다. 지금보다 한 단계 업그레이드된 디자인에 대한 새로운 시도를 모색하기 시작한 것이다. 지금까지 업무의 목표가 '온·오프라인 디자인 통합 운영'이었다면, 이제는 현재를 유지하는 것을 기본으로 또 다른 새로운 미션을 만들어 낸 셈이다. 이를 위해서는 내부적으로 끊임없이 질문을 던져야 할 것이다.

복잡한 보험 내용을 조금 더 쉽게 전달할 수 없을까?

우리는 현재를 유지하는 것에 멈추지 않고 하나씩 새롭게 발전하고 확장해 나가는 방향을 목표로 다양하고 새로운 시도를 구상하며 제안해야 할 것이다. 더욱 빠르게 변화하고 있는 온라인 환경과 그에 맞는 최적화된 디자인을 일관되게 구현하는 것. 앞으로 UI를 담당하는 AX디자이너로서 끊임없이 고민하고 나아가야 할 방향인 것 같다.

keyword