개요
이음은 우리은행이 운영하는 오픈API·BaaS 포털입니다. 계좌 조회, 이체, 결제, 인증 같은 은행 기능을 API로 열어, 핀테크·항공·부동산·여행 같은 외부 사업자가 자기 서비스 안에 금융을 심을 수 있게 해주는 개발자 대상 플랫폼이죠. 흥미로운 건 첫 화면입니다. 보통 이런 B2B 개발자 포털은 딱딱한 콘솔 화면이나 엔드포인트 목록으로 시작하는데, 이음은 그 대신 '불편에 대한 고민이 된다면?'이라는 질문을 던집니다. 이번 리뷰에서는 이 질문으로 시작하는 스토리텔링형 스크롤 구조가 오픈API라는 추상적인 상품을 어떻게 사람의 언어로 번역하는지, 그리고 그 서사가 실제 API 신청이라는 전환까지 매끄럽게 이어지는지를 웹사이트 제작·UX/UI 관점에서 살펴봅니다.
브랜드 & 메시지
이음의 메인은 하나의 문장으로 요약됩니다. 시장 사진 위에 얹힌 '불편에 대한 고민이 된다면?'. 그 아래로 '금융 기술이 아직 적용되지 않은 시장', '매매가 이루어지는 부동산', '여행을 계획하는 과정' 세 장의 카드가 구체적인 상황을 던집니다. 은행 API를 팔면서 은행 이야기를 하지 않는다는 점이 이 브랜드의 결정입니다. 스크롤을 내리면 흰 카드 위 '우리는 늘 새로운 고민에 부딪히게 됩니다', 물결 항공샷과 함께 '이제껏 경험해보지 못한 일상으로 도약', 원형으로 배열된 카드 사이의 '원하는 비즈니스에 대한 고민하는 시간을 줄이고'가 이어지죠. 질문 → 공감 → 해법으로 감정이 한 단계씩 상승하는 구성입니다.
톤앤매너는 짙은 네이비를 바탕으로 물빛 청록과 블루 액센트를 얹은 절제된 조합입니다. 상단 GNB는 'Biz API·API 스토어·고객지원·커뮤니티' 네 항목으로 짧고, 우측에 로그인/회원가입과 'API 페이지' 진입 버튼을 분리해 로그인 사용자와 탐색 방문자의 동선을 나눴습니다. 다만 히어로의 핵심 CTA가 '협업 문의'가 아니라 서사 뒤쪽의 '서비스 소개페이지가기' 버튼까지 미뤄져 있어, 첫 화면에서 바로 행동할 통로는 약한 편입니다.
UX/UI 관점
화면에서 확인되는 웹디자인 강점을 정리하면 이렇습니다. 첫째, 한 화면 한 메시지 원칙. 섹션마다 질문 하나와 답 하나만 놓아 스크롤 리듬이 명확합니다. 둘째, 추상적인 API를 시장·부동산·여행이라는 실물 장면으로 번역해 개발 지식이 없는 의사결정자도 가치를 이해하게 만든 점. 셋째, 물결 항공샷과 원형 카드 배열처럼 섹션마다 다른 비주얼 모티프를 써서 긴 스크롤에도 단조로움이 없다는 것. 넷째, '비즈니스 담당자의 솔직 담백한 인터뷰' 섹션에서 실제 도입 개발자의 Q&A를 사회적 증거로 배치한 구성. 다섯째, 좌측에 고정된 'BIZ 포털·개발자 포털' 퀵 메뉴로 서사에 몰입하다가도 언제든 실무 진입점으로 빠질 수 있게 한 점. 여섯째, 하단 공지사항·새소식 2단 구성으로 운영 중인 살아있는 플랫폼이라는 신뢰 신호를 준 것.
보완할 지점도 있습니다. 인터뷰와 서비스 슬라이더가 '1/3' 인디케이터에 의존하는데, 다음 카드가 있다는 사실이 시각적으로 약하게 노출됩니다. 캐러셀 화살표를 더 명확히 하고, 각 섹션 끝마다 '해당 API 신청'으로 직행하는 보조 버튼을 심으면 감정이 고조된 지점에서 전환을 놓치지 않습니다.
IA·SEO 전략
이음은 서사형 랜딩과 개발자 문서라는 성격이 다른 두 영역을 한 사이트에 담고 있습니다. IA 측면에서 이 둘의 검색 전략은 분리돼야 합니다. 감성적인 메인은 '은행 오픈API', 'BaaS 플랫폼', '금융 API 연동' 같은 사업자 탐색 키워드를 title과 H1에 명시적으로 잡아야 검색에서 발견됩니다. 지금처럼 카피가 이미지 위 그래픽 텍스트에 얹혀 있으면 크롤러가 읽지 못하므로, 핵심 문구는 실제 HTML 텍스트로 내려야 합니다. 반대로 'API 스토어'의 개별 API 문서 페이지는 '계좌조회 API', '이체 API', '본인인증 API'처럼 기능 단위로 고유 URL·고유 메타를 갖게 해, 개발자가 특정 기능을 검색했을 때 문서가 바로 걸리도록 설계하는 편이 좋습니다. 인터뷰에 등장하는 실제 도입사·연동 사례는 '도입 사례' 페이지로 독립시키면 그 자체가 강력한 롱테일 유입 자산이 됩니다.
성능·접근성
이음처럼 전면 이미지와 섹션별 대형 비주얼, 캐러셀이 겹치는 스크롤 서사는 초기 로딩 무게가 관건입니다. 히어로 시장 사진과 물결 항공샷은 WebP/AVIF 병행 제공과 적정 압축으로 LCP를 관리하고, 화면 아래 원형 카드·제품 이미지는 지연 로딩으로 첫 페인트에서 분리하는 것이 좋습니다. 캐러셀 스크립트는 뷰포트 진입 시점에 초기화해 메인 스레드 점유를 줄이면 스크롤 체감이 한결 매끄러워집니다. 접근성 측면에서는 이미지에 얹힌 그래픽 카피의 실제 텍스트화가 SEO와 스크린리더 양쪽을 동시에 해결합니다. 짙은 네이비 배경 위 옅은 회색 본문은 대비를 한 번 더 점검하고, 좌측 고정 퀵 메뉴와 캐러셀 화살표에는 키보드 포커스 순서와 명확한 포커스 링, ARIA 라벨을 부여해야 합니다.
디지털 파트너 더블루캔버스
이음의 사례가 보여주듯, 금융·핀테크나 B2B 플랫폼의 홈페이지 제작에서 진짜 어려움은 '기능을 나열하는 일'이 아니라 '추상적인 상품을 고객의 언어로 번역하는 일'입니다. The Blue Canvas(블루캔버스)는 바로 그 번역을 설계합니다. 서비스의 가치를 한 문장으로 뽑아내는 메시지 기획부터, 스크롤을 따라 감정이 상승하는 서사형 웹디자인, 검색에서 발견되도록 텍스트·메타·구조화 데이터를 정돈하는 SEO, 그리고 방문을 실제 문의와 신청으로 잇는 퍼포먼스 마케팅까지 하나의 흐름으로 엮습니다. 랜딩 하나를 예쁘게 만드는 데서 끝나지 않고, 웹사이트 제작 이후의 유입과 전환 지표를 함께 책임지는 파트너를 찾는다면 아래에서 확인해 보세요.
마무리와 다음 스텝
이음은 은행 오픈API라는 딱딱한 주제를 질문과 이야기로 풀어낸, 결이 뚜렷한 서사형 웹사이트입니다. 감정을 끌어올리는 구성은 이미 훌륭하니, 남은 과제는 그 몰입을 행동으로 전환하는 마감입니다. 실행 제안은 세 가지입니다. 첫째, 이미지 위 그래픽 카피를 실제 HTML 텍스트로 내려 검색 노출과 접근성을 동시에 확보하세요. 둘째, 인터뷰·서비스 섹션 끝마다 '해당 API 신청' 보조 CTA를 심어 감정이 고조된 지점에서 전환을 회수하세요. 셋째, API 스토어의 기능별 문서를 고유 URL·메타로 독립시켜 개발자의 검색 진입을 직접 받아내세요. 이 세 가지만 손봐도 서사의 완성도가 실제 리드로 이어질 겁니다.