개요
핵심 요약
- 케이뱅크 공식 사이트는 예적금·카드·대출·사업자 상품군마다 배경색을 바꾸는 컬러 블록 구조로 홈을 구성한다.
- 각 구획은 ‘재미있는 돈 모으기’, ‘카드 한 장으로 골라쓰는 혜택’처럼 상품명이 아닌 생활 언어를 제목으로 쓴다.
- 사업자 대출 구획에는 누적 가입자 108,755명 이상이라는 수치가 기준 시점과 함께 표기된다.
- BankOrCreditUnion, FinancialProduct, Offer, OfferCatalog 등 금융 특화 구조화 데이터가 다층으로 적용돼 있다.
- 다만 문서에 h1이 확인되지 않아, 구조화 데이터의 완성도에 비해 기본 제목 위계가 비어 있다.
케이뱅크의 공식 웹사이트는 인터넷전문은행이라는 업의 특성을 화면 구조로 옮겨놓았다. 실제 거래는 전부 앱에서 일어나므로, 이 사이트가 할 일은 상품을 이해시키고 앱으로 보내는 것이다. 그래서 홈은 기능 목록이 아니라 여덟 개 남짓의 색 구획으로 이루어져 있다. 블루, 블랙, 퍼플, 그린, 라이트 블루, 딥 퍼플, 차콜이 차례로 이어지며 각각 하나의 상품군을 맡는다.
첫 화면은 3분할이다. 왼쪽 큰 배너에 ‘케이뱅크가 전하는 새로운 이야기’가 놓이고, 오른쪽에는 두 개의 작은 카드가 세로로 쌓인다. 그 아래부터 색이 바뀌기 시작한다. 이번 리뷰에서는 이 컬러 블록 구조가 금융 상품 이해에 어떻게 작용하는지, 그리고 금융권에서 보기 드물게 촘촘한 구조화 데이터 적용과 대비되는 기본 마크업의 공백을 함께 살펴본다.
브랜드 & 메시지
카피는 금융 용어를 피한다. 예적금 구획의 제목은 ‘재미있는 돈 모으기’이고, 카드 구획은 ‘카드 한 장으로 골라쓰는 혜택’, 대출 구획은 ‘비교할수록 가벼운 이자생활’이다. 상품명이 제목 자리에 오는 대신 사용자의 생활 언어가 온다. 하위 카드에서야 ‘케이뱅크 대표통장 생활통장’, ‘기분통장’, ‘궁금한 적금’ 같은 실제 상품명이 등장한다. 큰 단위에서 이해시키고 작은 단위에서 이름을 알려주는 순서다.
시각 언어의 핵심은 색이다. 구획마다 배경을 통째로 바꾸는 방식은 스크롤을 ‘방을 옮겨 다니는 경험’으로 만든다. 특히 ONE 카드를 소개하는 구획은 별이 흩뿌려진 검은 배경에 카드 한 장만 놓아, 실물 카드의 질감을 드러내는 데 화면 전체를 쓴다. 사업자 대출 구획에서는 딥 퍼플로 바꾸며 ‘어서오세요 사장님!’이라는 호명형 카피를 던지는데, 개인 고객용 화면을 계속 보다가 이 구획에 도달한 사업자에게 ‘여기부터는 당신 이야기’임을 색으로 알린다.
UX/UI 관점
강점은 여섯 가지로 정리된다. 첫째, 색 구획 구조 자체가 목차 역할을 한다. 스크롤 중 배경이 바뀌면 주제가 바뀌었다는 신호가 되므로, 긴 홈에서도 자신이 어디쯤 있는지 감각적으로 파악된다. 둘째, 각 구획을 세 장의 카드로 통일해 정보 밀도를 일정하게 유지했다. 상품 수가 많아도 화면이 복잡해지지 않는다. 셋째, 카드마다 일러스트나 3D 오브젝트를 배치해 금리·한도 같은 숫자 중심 정보에 시각적 쉼표를 넣었다.
넷째, 앱 화면 목업을 여러 구획에서 반복 노출한다. 실제 거래가 앱에서 일어나는 서비스이므로, 웹에서 보는 화면과 앱에서 만날 화면이 연결돼 있다는 감각을 만드는 것이 중요하다. 다섯째, 사업자 대출 구획에서 누적 가입자 수를 기준 시점과 함께 제시해 실적을 검증 가능한 형태로 남겼다. 여섯째, 하단의 ‘케이뱅크 속 스토리’ 카드 캐러셀에 금융사기 알림, 콘텐츠, UX 이야기까지 섞어 배치했다. 상품만 늘어놓지 않고 브랜드의 관점을 보여주는 자리를 남긴 셈인데, 금융사에 대한 신뢰가 상품 조건만으로 형성되지 않는다는 점에서 유효한 배치다.
IA·SEO 전략
구조화 데이터는 이번 리뷰 대상 중 가장 촘촘하다. BankOrCreditUnion을 중심으로 Organization, FinancialProduct, Offer, OfferCatalog, ContactPoint, Certification까지 확인된다. 금융 상품과 혜택을 기계가 읽을 수 있는 형태로 정리해 둔 것으로, 검색 결과의 리치 스니펫뿐 아니라 AI 답변 엔진이 상품 조건을 인용할 때도 유리하게 작용한다. canonical도 지정돼 있다.
그런데 정작 문서에 h1이 확인되지 않는다. 구조화 데이터를 이 수준으로 갖춘 사이트에서 가장 기본적인 제목 요소가 비어 있는 것은 아쉬운 대목이다. 히어로 카피나 ‘케이뱅크’를 포함한 한 문장을 h1으로 두면 되는 간단한 작업이다. meta description은 상품군을 나열한 무난한 문장인데, ‘파킹통장 금리’, ‘사업자 대출 한도’처럼 실제 검색되는 조합을 담으면 클릭률이 올라간다. 상품별 상세 페이지에 각각 FinancialProduct와 FAQ 구조화 데이터를 붙이고 금리·한도 같은 조건을 텍스트로 노출하는 것이 다음 단계다. 금융 상품 검색은 조건 비교형 질문이 대부분이라, 조건이 텍스트로 존재하는지 여부가 노출을 좌우한다.
성능·접근성
구획마다 배경색이 바뀌고 스크롤 연동 효과가 쓰이는 구조라, 스크롤 이벤트 처리의 부하 관리가 중요하다. 배경 전환은 스크립트 계산보다 CSS 기반 처리로 맡기는 편이 프레임 안정성에 낫고, 스크롤에 반응하는 애니메이션은 `prefers-reduced-motion` 설정을 존중해야 한다. 홈에서 확인되는 이미지 수 자체는 많지 않고 WebP도 사용되고 있어, 이미지 측면의 부담은 크지 않다.
접근성에서 가장 신경 써야 할 지점은 대비다. 딥 퍼플이나 그린 배경 위의 흰 본문, 검은 배경 위의 회색 보조 문구처럼 배경색이 강한 구획일수록 명도 대비가 기준 아래로 떨어지기 쉽다. 금리·한도·수수료처럼 판단에 직결되는 숫자는 특히 대비를 확보해야 한다. 또한 h1 부재는 검색뿐 아니라 보조기기 사용자의 문서 탐색에도 그대로 영향을 준다. 금융 서비스는 고령 사용자 비중이 높은 영역이므로, 본문 기본 글자 크기와 터치 영역 크기도 함께 점검할 가치가 있다.
자주 묻는 질문
앱이 중심인 금융 서비스에서 웹사이트는 어떤 역할을 해야 하나요?
상품을 이해시키고 앱 설치나 가입으로 연결하는 역할입니다. 앱 기능을 그대로 옮기려 하면 어느 쪽도 완성되지 않습니다. 케이뱅크처럼 상품군별로 화면을 나누고 앱 화면 목업을 함께 보여주는 방식이 이해와 전환을 동시에 만듭니다.
홈페이지에서 구획마다 배경색을 바꾸는 것이 좋은가요?
콘텐츠가 주제별로 명확히 나뉘는 경우에는 효과적입니다. 배경 전환이 목차 역할을 해서 긴 페이지에서도 현재 위치가 파악됩니다. 다만 배경색이 강해질수록 본문 대비가 떨어지기 쉬우므로 색상마다 텍스트 명도를 따로 관리해야 합니다.
금융 상품 페이지에 구조화 데이터를 적용하면 어떤 이점이 있나요?
금리·한도·조건이 기계가 읽을 수 있는 형태로 정리되어, 검색 결과의 리치 스니펫과 AI 답변에서 인용될 가능성이 높아집니다. 금융 검색은 조건 비교형 질문이 대부분이라, 조건이 텍스트와 구조화 데이터로 존재하는지가 노출을 좌우합니다.
구조화 데이터를 잘 넣었는데 h1이 없으면 문제가 되나요?
됩니다. 구조화 데이터는 보조 신호이고, 제목 위계는 문서의 기본 구조입니다. h1이 없으면 검색엔진이 페이지 주제를 판단할 기준이 약해지고 보조기기 사용자도 문서를 훑을 기준점을 잃습니다. 한 줄이면 해결되는 사안입니다.
디지털 파트너 더블루캔버스
금융·보험처럼 규제가 있는 업종의 웹사이트는 제약이 많다. 표현 하나하나가 심의 대상이고, 상품 조건은 정확해야 하며, 고령 사용자까지 고려해야 한다. 그 조건 안에서 ‘딱딱하지 않게’ 만드는 일은 감각의 문제가 아니라 구조의 문제다. 어떤 정보를 큰 단위로 묶고, 어떤 언어로 제목을 달고, 숫자를 어디에 둘지를 먼저 정해야 한다.
The Blue Canvas(더블루캔버스)는 규제 업종의 홈페이지 제작에서 정보 위계를 먼저 세운다. 생활 언어와 상품 용어를 어느 층에 배치할지, 조건 정보를 텍스트로 어떻게 남길지, 그것이 검색과 AI 답변에 어떻게 읽힐지를 함께 설계한다. 표현의 자유가 좁은 업종일수록 구조가 성과를 만든다.
마무리와 다음 스텝
케이뱅크의 웹사이트는 앱 중심 금융 서비스의 웹이 무엇을 해야 하는지에 대한 명확한 답을 갖고 있다. 상품군마다 방을 만들어 색으로 구분하고, 생활 언어로 제목을 달고, 앱 화면을 반복 노출해 다음 단계를 예고한다. 금융권에서 보기 드문 수준의 구조화 데이터 적용도 눈여겨볼 만하다.
실행 제안은 셋이다. 첫째, 문서에 h1을 추가해 기본 제목 위계를 세운다. 구조화 데이터의 완성도에 비해 이 공백이 두드러진다. 둘째, meta description을 상품 조건 검색어가 포함된 문장으로 교체한다. 셋째, 강한 배경색 구획의 본문 대비를 재점검하고, 금리·한도 같은 숫자 정보의 가독성을 우선 확보한다. 구조가 이미 잘 잡힌 사이트이므로, 남은 것은 마감의 문제다.