개요
하나은행 기업(biz.hanabank.com)은 법인과 개인사업자를 위한 기업뱅킹 포털입니다. 첫 화면은 "더 새롭고 편리해진 하나 기업뱅킹을 만나보세요!"라는 헤드라인으로 개편을 선언하고, 바로 아래 계좌조회·즉시/예약이체·결재함·증명서 발급·인증센터를 아이콘 한 줄로 묶어 로그인 이전부터 자주 쓰는 업무로 곧장 들어가게 합니다. 은행 홈페이지 중에서도 기업뱅킹은 다뤄야 할 업무 축이 유난히 많은 유형입니다. 이번 리뷰는 로그인 전 랜딩 한 화면만 대상으로, 기업 고객이 처음 마주하는 정보 위계와 진입 동선, 그리고 이 밀도를 하나 그린이라는 브랜드 색으로 어떻게 정돈했는지를 웹디자인과 UX/UI 관점에서 살핍니다.
브랜드 & 메시지
헤드라인은 두 줄로 끊어 위력을 만듭니다. "더 새롭고 편리해진"은 하나 특유의 그린으로, "하나 기업뱅킹을 만나보세요!"는 짙은 먹색으로 대비시켜, 개편이라는 메시지를 색 하나로 각인시켰습니다. 컬러 온도는 정확히 브랜드 자산을 향합니다. 하나은행의 그린은 우측 로그인 버튼, 정책자금 사전진단 배너, 하단 하나더소호 띠까지 화면 전체의 강조 색을 일관되게 지배하며, 나머지는 흰 여백과 파스텔 일러스트로 눌러 두었습니다.
상단에는 개인뱅킹·하나카드·CMSiNet로 이어지는 계열 전환 링크를, 그 아래 My하나·조회·이체·B2B전자결제·외환·수출입·공과금·상품가입·업무·퇴직연금·자금관리·뱅킹관리까지 열 개 항목의 글로벌 내비게이션을 펼쳐 기업 금융의 업무 지도를 그대로 노출했습니다. CTA는 흐트러지지 않습니다. 우측 "편리한 금융업무를 시작하세요" 박스의 그린 로그인 버튼이 시선의 종착점이고, 그 밑 "처음 로그인하시나요?"가 신규 고객을 부드럽게 받아냅니다. 좌측 플로팅 카드 두 장 — "가이드 확인하기"와 "챗봇에게 물어보기" — 은 처음 온 사용자가 던질 두 질문을 미리 대신 눌러 줍니다.
UX/UI 관점
화면을 훑으면 기업뱅킹 특유의 정보 밀도를 다루는 장치들이 눈에 들어옵니다. 실제 화면에 근거한 강점을 짚습니다.
첫째, 비로그인 퀵액세스를 이중으로 깔았습니다. 상단 아이콘 다섯 개에 더해 "로그인 없이 바로 확인하세요" 영역에서 빠른조회서비스·펌뱅킹 수수료 조회·펌뱅킹 이체 확인증·등록금 수납 관리를 카드로 다시 노출해, 로그인 장벽 앞에서 이탈할 사용자를 붙잡습니다. 둘째, AI 해외송금을 탭 콘텐츠로 스토리텔링합니다. AI 해외송금·외환·수출입·비대면 특화·자금관리 탭 아래 "해외 송금 소요시간 AI가 분석해서 알려드려요", "내가 보낸 해외송금 어디까지 갔나 추적해 보세요"처럼 기능을 사람 말투 문장과 일러스트로 풀어, 딱딱한 기능 목록을 혜택 언어로 바꿔 놓았습니다.
셋째, 우측 세로 유틸 레일이 상시 접근을 보장합니다. 고객센터 1599-1111·기업하이챗봇·오늘의 환율·금융용어사전·손님의 의견을 세로로 고정하되 "접기" 제어를 붙여, 필요할 때만 펴도록 사용자에게 통제권을 줬습니다. 넷째, 파스텔 일러스트와 HAI 캐릭터로 온기를 넣었습니다. 금융 화면이 차가워지기 쉬운데, 핑크·민트·옐로우 카드와 챗봇 캐릭터가 심리적 문턱을 낮춥니다. 다섯째, 정책자금 사전진단 배너로 소상공인 실익을 상단에 배치하고 "결과부터 금리까지 0원으로 확인"이라는 숫자 카피와 자세히보기 CTA를 붙였습니다. 여섯째, 고객센터·새소식 모듈은 서식·약관 자료실과 공지를 카드로 구조화해 반복 문의를 셀프서비스로 흡수합니다.
IA·SEO 전략
로그인 전 이 화면은 사실상 서비스 안내 랜딩입니다. 그렇다면 검색 유입도 랜딩처럼 설계해야 합니다. 외환·수출입, 퇴직연금, 자금관리, B2B전자결제처럼 내비게이션에 이미 나뉜 업무 축은 각각 독립 URL에 고유한 <title>과 meta description을 부여해, "기업뱅킹 가이드", "펌뱅킹 수수료", "정책자금 사전진단" 같은 실제 검색어로 개별 페이지가 직접 노출되도록 하는 편이 좋습니다. 메인 한 장이 모든 키워드를 떠안으면 어느 것도 상위에 오르기 어렵습니다.
은행 특성상 반복 생성되는 공지·약관·PDF는 canonical과 noindex로 색인을 정리해 중복 문서가 검색 품질을 갉아먹지 않게 관리합니다. 기업뱅킹의 자주하는 질문은 FAQ 구조화 데이터로, 서비스 소개 페이지는 FinancialService 스키마로 마크업하면 리치 결과 노출에 유리합니다. 내부 링크는 "자세히보기" 같은 일반 앵커 대신 목적어가 담긴 문구로 바꿔 크롤러가 주제를 읽게 돕습니다.
성능·접근성
이 화면은 히어로 일러스트, 파스텔 카드, 캐릭터, 배너까지 이미지 자산이 많습니다. LCP와 CLS가 곧 체감 품질을 가릅니다. 히어로와 카드 이미지는 WebP/AVIF로 제공하고 명시적 width/height를 넣어 로딩 중 레이아웃 밀림을 막아야 합니다. 중앙 배너는 3/10 표기대로 열 장짜리 캐러셀이므로, 첫 장만 즉시 로드하고 나머지는 지연 로드하며, 이미 노출된 일시정지(⏸) 버튼은 반드시 유지해 자동 재생 제어권을 사용자에게 남겨야 합니다.
접근성은 은행에 선택이 아니라 의무입니다. 푸터의 웹접근성 안내 링크가 그 기준을 대변합니다. 아이콘만으로 된 버튼에는 텍스트 대체와 aria-label을, 그린 배경 위 흰 글자에는 대비 기준을, 열 개 내비게이션과 유틸 레일에는 키보드 포커스 순서를 확실히 부여해야 합니다. 챗봇·환율 같은 서드파티 위젯은 지연 초기화로 메인 스레드 점유를 낮추면 초기 반응성이 눈에 띄게 좋아집니다.
디지털 파트너 더블루캔버스
하나은행 기업 같은 금융·기업 서비스 화면은 다뤄야 할 업무가 많을수록 첫 화면의 위계 설계가 성패를 가릅니다. 은행권 규모가 아니어도, 취급 상품이 많은 제조사·B2B 서비스·전문 기관 홈페이지라면 같은 고민을 합니다 — 무엇을 앞에 두고, 무엇을 로그인 뒤로 미룰 것인가. The Blue Canvas(더블루캔버스)는 이 판단을 데이터로 풉니다. 기획설계로 정보 구조를 잡고, 웹사이트 제작과 웹디자인으로 브랜드 색을 화면 전체에 일관되게 입히며, SEO 검색엔진최적화로 업무별 랜딩이 각자의 키워드로 노출되게 하고, 퍼포먼스 마케팅으로 유입을 전환까지 잇습니다. 홈페이지 제작을 고민 중이라면, 만드는 것과 성과를 내는 것을 한 흐름으로 설계하는 파트너가 필요합니다.
마무리와 다음 스텝
하나은행 기업의 로그인 전 화면은 방대한 업무 축을 하나 그린이라는 한 가지 색과 비로그인 퀵액세스로 눌러 담은, 밀도를 잘 통제한 랜딩입니다. 다음 세 가지를 제안합니다. 첫째, 외환·퇴직연금·자금관리 등 업무별 독립 랜딩에 고유 메타데이터를 부여해 검색 유입을 분산 확보하세요. 둘째, 히어로·캐러셀 이미지를 WebP와 명시적 크기로 정리해 LCP와 CLS를 잡으세요. 셋째, 아이콘 버튼과 유틸 레일의 대체 텍스트·키보드 접근성을 점검해 은행 수준의 접근성 기준을 화면 곳곳까지 채우세요. 측정과 개선을 2주 주기로 반복하면 첫인상과 전환이 함께 올라갑니다.