코드벤터 홈페이지를 새롭게 정리했습니다. 이번 개편에서 먼저 생각한 것은 방문자가 처음 화면을 열었을 때 갖게 될 두 가지 질문이었습니다. “어떤 제품을 함께 만들 수 있을까?” 그리고 “어디에서 이야기를 시작하면 될까?”
개발할 수 있는 서비스와 실제 프로젝트를 더 쉽게 살펴보고, 필요한 순간에 바로 문의할 수 있도록 메인과 각 페이지의 구성을 바꿨습니다. 브랜드를 기억할 수 있는 작은 안내자로, 직접 만든 3D 캐릭터 ‘C 메이커’도 함께 배치했습니다.
첫 화면에서 우리가 만드는 제품을 알 수 있도록
메인 메시지는 “AI를 실제 제품으로, 실행까지 연결합니다”로 정리했습니다. 스타트업의 MVP와 웹·앱, 기업의 ERP·CRM 같은 업무 시스템, AI 연동과 자동화, 기존 시스템 개선과 클라우드 운영까지 실제로 함께할 수 있는 개발 범위를 앞에 놓았습니다.
서비스 이름을 많이 나열하기보다 방문자가 자신의 상황을 대입할 수 있는 설명이 필요했습니다. 아이디어의 핵심 기능을 먼저 구현하려는 팀인지, 반복 업무를 줄이려는 기업인지, 이미 운영 중인 서비스를 개선하려는 팀인지에 따라 관련 서비스와 프로젝트를 찾아갈 수 있게 구성했습니다.
노트북과 모바일에서는 정보의 순서가 특히 중요합니다. 첫 화면에 핵심 메시지와 문의 버튼을 우선 배치하고, 자세한 내용은 아래로 이어지게 했습니다. 모든 내용을 한 화면에 넣기보다, 첫 화면만으로도 무엇을 하는 회사인지와 다음 행동을 알 수 있도록 하는 것이 목표였습니다.
설명 표보다 실제 프로젝트 화면을 앞에
비슷한 크기의 카드와 테두리가 반복되면 정보가 많아 보여도 각각의 차이를 읽기 어렵습니다. 이번에는 이런 구성을 줄이고, 프로젝트 화면과 이미지가 먼저 눈에 들어오도록 바꿨습니다. 각 사례에서는 어떤 서비스를 만들었는지, 어떤 업무나 사용 흐름을 다뤘는지를 화면과 짧은 설명으로 연결했습니다.
서비스, 프로젝트, 인사이트, 파트너 페이지도 같은 방향으로 정리했습니다. 공통된 제목과 문의 동선을 유지하되, 페이지마다 보여줘야 하는 콘텐츠에 맞춰 이미지와 글의 비중을 조정했습니다. 방문자가 사례를 살펴본 뒤 자신의 프로젝트를 이야기하는 흐름이 자연스럽게 이어지도록 했습니다.
C 메이커: 브랜드의 C를 움직이는 캐릭터로
C 메이커는 코드벤터의 ‘C’에서 출발했습니다. 남색 몸통과 초록색 포인트, 손에 든 태블릿으로 제품을 만드는 팀의 이미지를 담았습니다. 메인 배경과 분리된 흰 박스 대신 투명한 배경을 사용해, 캐릭터가 화면 안에서 자연스럽게 떠 있는 느낌을 만들었습니다.
웹에 적용한 캐릭터는 미리 렌더링한 영상이 아니라 실제로 회전해 볼 수 있는 3D 모델입니다. Blender에서 만든 모델과 움직임을 GLB 형식으로 내보내 웹 3D 뷰어에 연결했습니다. 방문자는 마우스나 터치로 캐릭터를 돌려볼 수 있습니다.
움직임은 약 28초 길이로 반복됩니다. 손을 흔들어 인사한 뒤 손짓과 고개 움직임으로 소개를 이어가고, 다시 시작 자세로 돌아옵니다. 짧은 인사 동작만 계속 반복하는 대신, 서비스 소개에 맞춰 움직임에 여유를 두었습니다.
움직임에 맞춰 바뀌는 말풍선과 선택형 음성
말풍선은 캐릭터 가까이에 붙이고 애니메이션의 시간에 맞춰 문구가 바뀌도록 했습니다. 인사를 시작으로 MVP·웹앱 개발, ERP·CRM·AI 자동화, 시스템 개선과 클라우드 운영을 차례로 소개합니다. 긴 안내문을 한 번에 읽게 하기보다 짧은 문장으로 개발 범위를 전달합니다.
한국어 음성은 Google Gemini의 음성 생성 기능으로 제작했습니다. 다만 홈페이지를 여는 순간 소리가 나오는 방식은 피했습니다. 기본은 무음이며, 방문자가 ‘음성 켜기’를 선택했을 때 애니메이션과 같은 순서로 안내가 재생됩니다. 말풍선만으로도 내용을 이해할 수 있게 했습니다.
움직임과 소리는 방문자가 제어할 수 있습니다. 재생을 멈출 수 있고, 캐릭터가 화면 밖으로 나가거나 다른 탭으로 이동하면 재생도 멈춥니다. 기기의 움직임 줄이기 설정에서는 자동 애니메이션을 제한하고, 3D 모델을 불러오지 못하더라도 대체 이미지가 남도록 구성했습니다.
화면을 바꾸면서 지켜야 했던 콘텐츠와 URL
기존 홈페이지에는 오랫동안 쌓아온 프로젝트와 인사이트가 있었습니다. 개편에서는 새 화면을 만드는 것과 함께 기존 콘텐츠의 주소, 검색용 제목과 설명, 대표 주소와 사이트맵을 확인했습니다. 필요한 리디렉션도 정리해 예전 링크로 들어오는 방문자가 관련 페이지에 도착할 수 있도록 했습니다.
이 작업이 곧바로 검색 순위나 문의 증가를 보장하는 것은 아닙니다. 이번 단계에서는 기존 콘텐츠와 검색 유입 경로를 유지하면서, 방문자가 정보를 이해하고 문의하기 좋은 구조를 만드는 데 집중했습니다. 이후에는 실제 유입과 사용 흐름을 보며 설명과 배치를 조정할 계획입니다.
운영하면서 계속 다듬는 홈페이지로
프로젝트, 인사이트, 파트너 콘텐츠는 관리자에서 초안을 저장하고 미리 본 뒤 발행할 수 있도록 정리했습니다. AI에게 글 작성이나 수정을 요청할 때도 같은 콘텐츠 관리 경로를 사용해, 검토 중인 내용과 공개된 내용을 구분할 수 있습니다.
이번 개편에는 코드벤터가 제품을 만드는 방식을 담았습니다. 필요한 정보를 먼저 정리하고, 실제 화면으로 설명하고, 사용자에게 도움이 되는 곳에 기술을 적용하는 것입니다. C 메이커 역시 방문자가 코드벤터의 개발 범위를 이해하고 기억하도록 돕는 역할을 맡았습니다.
새 홈페이지에서 C 메이커 만나기 · 실제 개발 프로젝트 살펴보기
만들고 싶은 제품이나 개선하고 싶은 업무가 있다면 프로젝트 문의로 현재 상황을 알려주세요. 필요한 기능과 우선순위부터 함께 정리하겠습니다.