더 빠른 세상에서 보다 여유로운 삶을 생각합니다
플립커뮤니케이션즈와 진행한 이번 리뉴얼에서는 KB금융그룹을 찾는 모든 방문자를 향한 세심한 배려가 곳곳에 묻어있다.
주요 계열사간 협업 및 인력 교류 등 특유의 소통문화로 ‘One-firm’이라는 캐치프레이즈를 실현 중인 KB금융그룹이 그룹 웹사이트 리뉴얼을 통해 다시 한 번 소통에 대한 의지를 보였다. 특히 플립커뮤니케이션즈와 진행한 이번 리뉴얼에서는 KB금융그룹을 찾는 모든 방문자를 향한 세심한 배려가 곳곳에 묻어있어 그룹 내 통합은 물론, 다양한 국가 및 디바이스 기반 사용자들과의 접점을 넓히는 성과를 보였다.
- 프로젝트명: KB금융그룹 리뉴얼
- 클라이언트: KB금융그룹
- 브랜드명: KB금융그룹
- 오픈일: 2017년 9월 28일
- URL: www.kbfg.com
- URL: http://www.pulipinc.com
- 제작사: 플립커뮤니케이션즈
KB의 중심!
KB금융그룹은 국내 최대 고객 기반 및 지점망을 갖춘 종합 금융그룹으로, 고객과 투자자, 그룹 관계자 등 모든 웹사이트 이용자의 편의성을 향상시키기 위해 웹사이트 사용성 개선 및 모바일 서비스 신규 구축을 진행했다.
열두 개의 계열사를 갖춘 KB금융그룹의 대표 웹사이트라는 점을 고려해 ‘중심’을 의미하는 ‘CENTRIC’이라는 CORE KEYWORD를 전체 프로젝트 테마로 선정했으며, 이를 토대로 사용자 중심의 디자인을 통해 사용성 향상과 그룹의 중심이 되는 아이덴티티를 표현할 수 있는 WSG(웹 스타일 가이드) 개선을 목표로 기획했다.
Identity of KB
KB금융그룹의 아이덴티티를 가장 효과적으로 전달하기 위해 2017 KB금융그룹의 전략과제인 CODE 2017의 Customer, One firm, Digitalization, Evolution 등의 키워드를 두 가지 방법으로 녹여냈다.
첫째, 키워드가 UI·UX디자인에 중점적으로 활용되도록 고려함과 동시에 KB금융그룹이 추구하는 바를 방문자들이 비주얼을 통해 감성적으로 느낄 수 있도록 표현했다.
둘째, 키워드 각각을 ‘사람을 먼저 생각하는 KB가 금융을 넘어 미래를 만듭니다.’, ‘KB가 올바른 금융의 가치를 지킵니다. One Firm, One KB’, ‘KB의 디지털금융 서비스는 더 빠른 세상에서 보다 여유로운 삶을 생각합니다.’의 메인 카피를 만들어 전달하고자 하는 메시지를 담아냈다.
WSG(Web Style Guide) 수립
KB금융체를 국문, 영문 사이트 전체에 반영함으로써 KB금융그룹의 아이덴티티를 확고히 했다. 또한 기존의 KB금융그룹 스타일 가이드를 토대로 웹에 최적화된 온라인 스타일 가이드를 재정립했다. KB금융그룹 웹사이트를 표준 가이드로, KB의 여러 계열사가 좀 더 일관성 있고 통일된 아이덴티티를 추구할 수 있도록 하는 것을 목표로 했다. 그룹의 브랜딩 영역인 비주얼 이미지는 ‘Emotional Life with Digital’이라는 콘셉트로 감성과 디지털이라는 조합을 적절히 표현해 내고자 많은 고민과 노력을 기울인 부분이다.
모바일 서비스 신규 구축
‘모바일 퍼스트’를 넘어 ‘모바일 온리 시대’라 불릴 정도로 모바일 디바이스 위주로 일상생활을 하고 비즈니스를 처리하는 최신의 경향을 반영해, 국·영·중·일문 모바일 웹을 신규 구축했다.
이에 따라 PC뿐만 아니라, 모바일 디바이스를 통해 웹사이트에 접속하는 사용자의 편의성 충족에 특히 많은 노력을 기울였다. 프로젝트 기획 단계에서 콘텐츠별 접속량과 패턴 등의 분석을 통해 모바일 웹의 효과적인 구축 방안에 대해 고민했고, 접근 디바이스별 최적화된 콘텐츠 화면 구성을 목표로 웹과 모바일 사이트를 각각 최적화해 구축했다.
모바일 메인
사람을 먼저 생각하는 KB
이번 프로젝트를 진행하며 가장 중점적으로 고려한 부분은 사용자에 대한 배려로, 사용성 향상 방안은 크게 다섯 가지로 구분된다.
1.사용성의 근간이 되는 IA 대폭 개선
기존에 15개에 달하는 1Depth 메뉴를 통합·정리했다. 온라인 트렌드 및 모바일 사용성을 고려해 1Depth 메뉴 수를 간소화 하고, Depth를 2~3단계로 축소시킴으로써 심플한 IA 구조를 완성했다.
2.다양한 해상도 고려
태블릿 사용자를 위해 해상도 1024에 대응하는 햄버거 GNB 변환 기능을 적용했고, 와이드 모니터 사용자가 많은 점을 고려해 해상도 1600에서도 주요 비주얼 요소들이 유연하게 확장되도록 구현했다.
3.투자 정보 강화
대한민국 대표 금융그룹의 웹사이트인 만큼 투자자를 비롯한 이해관계자의 방문이 많다는 점을 염두에 두고 투자 정보 콘텐츠를 대폭 정비했다. 기존 여러 개의 대메뉴로 분리되어 있던 투자 정보 메뉴들을 한 곳으로 모아 사용자가 알기 쉽도록 IA를 재배치했다. 또한, 투자 정보 서브 메인을 신규로 구성해 가장 최근에 업데이트 된 투자 정보를 한눈에 확인할 수 있도록 했다.
4.글로벌 정보 확대
KB금융그룹은 금융산업의 글로벌화에 따라, 이번 리뉴얼을 통해 다국어 사이트의 콘텐츠를 강화했다. 영·중·일문 사이트에서도 외국인 방문자가 충분히 그룹에 관한 정보를 습득할 수 있도록 그룹 소개 콘텐츠를 확대 제공했다.
5.SNS 공유 기능 추가
카카오톡, 페이스북, 웨이보 등 주요 SNS를 통한 공유 기능을 추가해 제공했다.
제작 비하인드 스토리
DI: 프로젝트 진행 과정은 어땠나요?
고객사의 요구 사항 분석과 글로벌 금융그룹 벤치마킹 등을 통해 프로젝트 전략 수립 후, 사용자의 사용성에 중점을 두고 기획 단계부터 고객사와 지속적으로 커뮤니케이션하고 프로젝트의 초기 콘셉트를 유지할 수 있도록 프로젝트 팀원들과 끊임없이 공유했다. 이런 과정들에 더해 사용자에게 잘못된 정보 전달의 문제가 발생하지 않도록 디테일한 부분들까지 꼼꼼히 체크하며 진행했다.
DI: 기억에 남는 에피소드가 있다면?
프로젝트 진행 기간의 모든 시간들이 기억에 남지만 그 중에서 가장 기억에 남는 것은 중·일문 등 외국어 웹사이트 작업이었다. 해당 언어에 대한 이해도가 낮은 상황에서 진행된 오타 검수 및 수정사항 반영은 마치 숨은 그림 찾기와 같았다. 특히, 중문의 경우 문장의 흐름에 따라 쉼표 등 문장 부호의 사용법이 달라지는 언어적 이해가 없는 상황에서, 문장 부호를 정리해 달라는 요청을 받았다. 모든 페이지를 다 읽어보고 오랜 시간에 걸쳐서 작업 했는데, 전문가의 감수를 통해 문장 부호의 사용법이 잘못 적용 되었다는 것을 알게 되었고, 결국 재 작업을 하게 됐다. 아무래도 익숙하지 않은 언어의 장벽에 부딪히다 보니 이런 에피소드들이 생겨났다고 생각한다.
담당자 talk
위효선
플립커뮤니케이션즈 전략기획그룹 주임
간혹 배우들이 ‘작품 종영 후에 바로 캐릭터에서 빠져 나오지 못 하는 경우가 있다’라고 말하는 것처럼 아직도 프로젝트가 진행되었던 순간에 머물러 있는 기분입니다.
저희 회사에서 금융권 프로젝트를 많이 수행하고 있는데 이번 KB금융그룹 프로젝트를 수행하면서 금융 서비스에 대한 새로운 시각을 가져볼 수 있었던 좋은 기회였고 동시에 큰 성장의 계기가 되었습니다. KB라는 기업이 추구하는 가치와 같이 금번 구축한 KB금융그룹의 웹사이트가 사용자의 입장에서 세심히 배려한 사이트, 편의성이 좋고 훌륭한 비주얼을 자랑하는 사이트로 모두에게 인식되길 바라는 마음입니다.
마지막으로, 함께 뛰었던 프로젝트의 모든 팀원 분들께 감사한 마음 전하고 싶습니다. 고맙습니다.
뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
- 에디터전 찬우 (jcw@ditoday.com)
