G2BMarket 메인 페이지를 개편하고 나서, 내가 확인한 메인 트래픽이 약 10% 늘었다. 숫자도 반가웠지만 더 인상적이었던 건, 화면을 바꾼 뒤 사용자의 반응을 빠르게 볼 수 있다는 점이었다. 잘 만든 웹사이트는 결과를 기다리기만 하는 매체가 아니라, 계속 반응이 돌아오는 제품이라는 생각이 들었다.
이번에는 메인 페이지와 기업 상세페이지를 함께 돌아봤다. 어떤 기능이 있는지를 나열하는 화면에서, 사용자가 무엇부터 보고 다음에 어디로 가면 되는지를 안내하는 화면으로 옮겨가는 과정이었다.
AS IS → TO BE: 메인 페이지 개편
AS IS — 검색과 분류를 한 화면에
개편 전 메인 화면. 검색 입력과 업종·세부 카테고리를 중심으로 탐색을 시작하는 구조였다. 당시 공지 내용은 과거 화면의 일부이며 현재 운영 일정이 아니다.
TO BE — 검색은 간결하게, 분야는 시각적으로
2026년 10월 2일 직접 확인한 현재 메인 상단. 분야별 이미지 카드 뒤로 추천 기업 탐색이 이어진다. 기업명이 노출되지 않는 영역까지만 캡처했다.
AS IS → TO BE: 기업 상세페이지 개편
AS IS — 기본 정보 카드가 먼저 보이는 화면
개편 전 상세 화면. 상단의 기본 정보 카드 아래로 기업 설명이 이어지고, 우측에는 프로모션과 페이지 목차가 배치되어 있었다.
TO BE — 기업의 맥락과 탐색 흐름을 먼저 보여주는 화면
동일 기업의 현재 상세 화면. 업종 이미지와 요약을 앞에 두고, 기업 개요·사업 내용·사업 기록·참고 정보로 이동할 수 있게 구성했다. 히어로 이미지는 업종을 표현하는 AI 이미지이지 실제 회사 사진이 아니다.
두 상세 비교 이미지는 이미지 편집으로 회사명과 반복 표기, 대표자·주소·연락처 등 식별 정보를 블랙 박스로 가렸다. 특정 기업을 평가하려는 비교가 아니라 UI 구조를 살펴보기 위한 자료다. 과거 화면과 현재 캡처의 화면 폭·시점은 다르므로, 픽셀 단위 비교보다는 정보 배치와 탐색 흐름을 중심으로 봐주면 좋겠다.
메인 개편 후 약 10% 증가, 숫자보다 먼저 느낀 것
메인 트래픽이 약 10% 늘었다는 건 이번 개편 이후 내가 관찰한 변화다. 다만 이 수치를 디자인 개편만으로 트래픽이 10% 증가했다는 인과관계의 증명으로 이야기하고 싶지는 않다. 유입 경로나 공고 수요, 다른 개선 작업의 영향도 함께 움직일 수 있기 때문이다. 비교 기간과 지표 정의를 별도로 공개한 A/B 테스트 결과는 아니다.
그럼에도 운영하는 입장에서는 의미 있는 신호였다. 화면을 손보고 배포한 다음, 이용 흐름이 달라지는지 다시 살펴볼 수 있다. 작은 개선이 실제 반응으로 돌아오는 순간에는 “이 부분을 바꾸길 잘했다”는 감각이 생긴다.
잘 만든 웹사이트는 실시간으로 반응이 바로바로 오는 것 같다. 여기서 말하는 실시간은 모든 변경이 즉시 성과로 확정된다는 뜻이 아니라, 배포와 관찰, 다음 개선 사이의 거리가 짧다는 체감에 가깝다. 웹은 만들어 놓고 끝나는 결과물보다 계속 대화하는 제품에 가깝다고 느낀다.
상세페이지도 함께 개편했지만, 이번에 말하는 약 10%는 메인 트래픽에 대한 관찰이다. 상세페이지의 체류 시간이나 클릭률, 전환율까지 개선됐다고 확인한 것은 아니다. 그 부분은 앞으로 따로 확인해야 할 일이다.
메인 페이지: 무엇을 입력할지 몰라도 시작할 수 있게
이전 메인은 큰 검색창과 업종 분류가 중심이었다. 이미 찾는 회사나 업종을 알고 있는 사람이라면 바로 사용할 수 있는 구조다. 반대로 막 들어온 사람에게는 검색어부터 떠올려야 한다는 부담이 있을 수 있다.
현재 메인 상단에서는 검색창을 간결하게 두고, 분야별 기업을 이미지 카드로 보여준다. IT·소프트웨어, 전문 서비스, 제조·생산, 건설·시공처럼 분야의 성격을 먼저 읽고 들어갈 수 있다. 아래에는 추천 기업, 토픽 탐색, 소식과 공고를 살펴보는 영역이 이어진다.
내가 중요하게 본 건 기능을 더 많이 드러내는 일이 아니라 진입점을 쉽게 고르는 일이었다. 정확한 회사명을 아는 사람은 검색으로, 분야만 정한 사람은 분야별 탐색으로 들어갈 수 있다. 첫 화면이 모든 것을 설명하려 하기보다, 다음 행동을 고르는 데 도움을 주면 좋겠다고 생각했다.
상세페이지: 데이터가 많다는 것과 읽기 좋다는 것은 다르다
기업 상세페이지에는 업종, 키워드, 기본 정보, 사업 설명과 관련 기록이 함께 들어간다. 항목이 많아질수록 정보를 충분히 제공한다는 장점은 있지만, 처음 보는 사람에게는 어디부터 읽어야 할지 어려워질 수도 있다.
이전 화면은 대표자·설립·주소 같은 기본 정보 카드가 먼저 눈에 들어왔다. 현재 화면은 업종을 표현하는 히어로 이미지와 요약을 앞에 두고, 그 아래에 키워드와 저장·공유·수정/비공개 동작을 모았다. 본문은 기업의 사업을 이해하는 설명과 기본 정보를 함께 살펴보는 구조다.
또 기업 개요, 사업 내용, 사업 기록·기업, 참고·탐색으로 이어지는 메뉴를 두어 필요한 부분으로 이동할 수 있게 했다. 사용자가 정보를 전부 정독해야만 쓸 수 있는 페이지가 아니라, 지금 필요한 정보를 골라 읽는 페이지에 가까워지길 바랐다.
이런 개편은 데이터를 더 정확하게 만드는 작업과는 구분해야 한다. UI가 좋아졌다고 기업 정보의 정확성이 자동으로 올라가지는 않는다. 참고 정보라는 안내와 수정/비공개 요청 동선도 화면 안에 함께 남겨두는 이유다.
Astra가 UI를 잘 본다고 느낀 이유
이번 작업을 하면서 Astra 모델이 확실히 UI를 잘 보는 것 같다고 느꼈다. 이건 모델 전체를 평가한 벤치마크 결과라기보다, 내 화면을 함께 고치는 과정에서 얻은 개인적인 인상이다.
이제는 단순히 캡처를 붙여넣고 “이렇게 만들어줘”라고 시키는 단계에서 조금 더 나아갈 수 있는 것 같다. 화면을 기준으로 어떤 부분을 먼저 읽게 할지, 어디가 복잡하게 보이는지, 무엇을 덜어낼지 함께 검토하는 식이다. 텍스트로만 설명할 때보다 내가 불편하게 느낀 지점을 공유하기도 쉽다.
내가 원한 것도 새로운 요소를 무조건 많이 만드는 일이 아니었다. 이미 있는 화면에서 중요한 부분을 더 분명하게 보이게 하고, 페이지 전체의 균형을 맞추는 일이었다. 이번 작업에서는 그런 UI 판단을 주고받는 과정이 잘 맞았다.
캡처 + 디자인 시스템 + 이미지 생성
캡처는 지금 화면의 문제를 공유하는 데 좋다. 하지만 캡처 한 장만으로 작업하면 그 화면만 그럴듯해지고, 다른 페이지와는 어색해질 수도 있다. 그래서 디자인 시스템이 함께 들어오는 게 중요하다고 느낀다.
글자 크기와 강조 방식, 여백, 버튼, 카드, 색의 역할 같은 기준이 있으면 메인과 상세페이지가 같은 제품 안에 있는 화면처럼 이어진다. 화면마다 새로운 디자인을 발명하는 대신, 공통된 기준 안에서 필요한 차이만 주는 것이다.
여기에 이미지 생성이 더해지니 결과가 한층 고급스러워진 것 같다. 메인의 분야별 카드와 상세페이지의 업종 이미지는 긴 설명을 읽기 전에 분야의 분위기를 이해하는 시각적 단서가 된다. 텍스트와 카드만으로 채운 화면보다 구성이 풍부해진다.
다만 생성 이미지를 실제 기업의 시설이나 제품 사진처럼 보이게 해서는 안 된다. 현재 상세 화면의 “AI 업종 이미지 · 실제 회사 사진 아님” 같은 안내는 그 구분을 위한 장치다. 보기 좋게 만드는 일과 사실로 오해되지 않게 만드는 일은 같이 챙겨야 한다.
내가 느낀 변화는 AI가 화면을 대신 만들어준다는 것보다, 캡처로 맥락을 공유하고 → 디자인 시스템으로 기준을 맞추고 → 이미지 생성으로 표현을 보완하는 흐름이 자연스러워졌다는 데 있다.
개편의 파급력은 다음 개선을 이어가게 하는 것
이번 개편에서 가장 크게 남은 건 약 10%라는 수치 하나만은 아니다. 메인과 상세페이지를 손본 뒤 반응을 보고, 그 반응을 바탕으로 다음 개선을 생각할 수 있다는 자신감이다.
앞으로는 메인 트래픽뿐 아니라 검색으로 이어지는 클릭, 분야별 탐색에서 상세페이지로 넘어가는 흐름, 상세페이지 안에서 필요한 정보를 찾는 과정을 따로 살펴보고 싶다. 아직 측정 결과가 없는 항목을 성과로 포장하기보다, 다음에 확인할 질문으로 남겨두려고 한다.
화면을 예쁘게 만드는 것에서 끝나지 않고, 제품을 이해하고 이용하는 방식을 조금 더 편하게 만드는 것. 메인 페이지와 상세페이지 개편의 파급력은 그런 작은 변화들이 이어질 때 생기는 것 같다.
현재 G2BMarket 메인 페이지에서 개편된 탐색 흐름을 볼 수 있다. 나라장터 알림 기능이 궁금하다면 앞서 정리한 G2B Market 입찰 공고 이메일 설정 사용기도 함께 읽어보면 좋겠다.