개요
어떤 브랜드인가 — 플랜아이(Plani)는 대전·서울·광주에 거점을 둔 통합 AX(AI Transformation) 기업이다. 첫 화면 상단의 작은 파란 라벨 VALUE DATA 아래로 "정보를 가치 있게 만드는 통합 AX 파트너"라는 헤드라인이 커서처럼 깜빡이는 언더스코어를 달고 걸려 있고, 그 밑 "복잡한 데이터와 기술을 가공하여 고객에게 유용한 정보를 제공하는 것이 플랜아이의 존재 이유입니다"라는 문장이 회사의 정체성을 한 번에 정리한다. 싱크인사이트, 플래니 같은 자체 AI 플랫폼과 디지털 전환 컨설팅을 함께 파는 B2B 기술 기업의 홈페이지다. 이 리뷰는 대화형 AI를 히어로 정중앙에 올린 이 웹사이트의 첫인상과 메뉴 구조, 그리고 검색·성능 관점의 개선 여지를 스크린샷에 보이는 것만 근거로 따라간다.
브랜드 & 메시지
브랜드 언어는 절제돼 있다. 배경은 흰색에서 옅은 하늘빛으로 번지는 그라데이션, 포인트 컬러는 코발트 블루 하나로 통일된다. 헤드라인에서 "AX" 세 글자만 파랗게 물들여 회사가 팔려는 핵심 단어를 시선의 종점에 놓은 판단이 좋다. 오른쪽 위에 떠 있는 은색 메탈릭 별 풍선은 자칫 딱딱해질 기술 회사 톤에 3D 오브제 하나로 온기를 넣는다.
가장 과감한 선택은 히어로 정중앙의 흰 대화 상자다. "AI 플래니입니다. 플랜아이에 대해 궁금한 점을 물어보세요!"라는 프롬프트와 함께 Portfolio·Contact 필 버튼, 오른쪽 끝의 검은 원형 전송 버튼이 놓여 자사 챗봇 제품 '플래니'를 곧바로 회사 소개 도구로 쓴다. 배너 카피 대신 입력창을 첫 CTA로 세운 셈이라, 제품과 마케팅 메시지가 한 몸으로 붙는다. 네비게이션은 우측 상단 Menu 한 곳으로 접혀 있고 그리드 아이콘이 전체 메뉴를 연다. 상단을 극도로 비운 대신, 사실상의 사이트맵은 푸터의 END TO END / SOLUTION / BRAND / CAREER / NEWS / PROOF / IR / ESG 열로 펼쳐 놓았다.
UX/UI 관점
화면에서 확인되는 웹디자인의 강점을 짚으면 이렇다.
1. 전환 레일 다이어그램. VX → DX → AX → CX → P·P → ESG 여섯 개 원을 선으로 이어 놓고, 각 원 아래 "비즈니스 가치 전환 · 디지털 전환 · AI 전환 · 클라우드 전환 · 디지털 마케팅 · AI 일자리 창출" 라벨을 달았다. 추상적인 서비스 포트폴리오를 한 줄짜리 여정으로 압축한 정보 설계다.
2. 대화형 진입점. 정적 슬로건이 아니라 입력창으로 첫 상호작용을 유도해, 방문자가 자기 질문을 던지며 사이트에 관여하도록 만든다.
3. 컬러 절제. 파랑 단색과 무채색 텍스트만으로 대비를 관리해, 담긴 정보가 많은데도 화면이 조용하다.
4. 여백 리듬. 히어로와 카드 블록 사이 넉넉한 상하 여백이 스크롤에 박자를 넣어 각 섹션이 독립적으로 읽힌다.
5. 제품을 카드 한 장으로. 싱크인사이트 카드의 "필요한 AI 기능, 하나의 플랫폼으로 / 공공기관이 선택한 GS 1등급 AI 플랫폼", 플래니 카드의 "URL만 있으면 시작하는 AI 대화 서비스 / 2주 무료 체험 제공"처럼 제품마다 한 문장 가치 + 한 줄 증거 + 체험 훅을 같은 규칙으로 배치했다.
6. 기억을 남기는 3D 오브제. 은색 별 풍선이 반복 노출되면 로고 없이도 브랜드 단서로 작동한다.
IA·SEO 전략
헤더 메뉴를 "Menu" 하나로 접은 설계는 시각적으로 깔끔하지만, 검색 크롤러와 처음 온 방문자에게는 주요 랜딩으로 가는 텍스트 링크가 첫 화면에 거의 없다는 뜻이기도 하다. 싱크인사이트·플래니·아누타 캔버스 같은 개별 제품 페이지가 상단에서 한 번의 클릭으로 닿지 않으면 내부 링크 자산이 푸터에만 몰린다. 각 솔루션을 독립 URL로 두고 히어로 하단에 제품별 텍스트 앵커를 노출해, 상단에서 제품으로 이어지는 경로를 크롤링 가능하게 만들 것을 권한다. 대화창이 자바스크립트로 렌더링되는 만큼 회사 소개나 서비스 정의 같은 핵심 문장은 챗봇 응답이 아니라 정적 HTML 본문으로도 반드시 존재해야 색인된다. 제품마다 고유한 title과 description을 부여하고, "GS 1등급"이나 "공공기관 선택"처럼 이미 화면에 있는 신뢰 문구를 메타와 구조화 데이터로 승격하면 검색 스니펫 경쟁력이 올라간다.
성능·접근성
첫 화면은 그라데이션 배경, 은색 메탈 풍선, 두 장의 고해상도 카드 이미지, 그리고 실시간 대화 위젯으로 짜여 초기 로드 부담이 작지 않다. 히어로 배경과 별 오브제는 LCP 후보이므로 WebP·AVIF로 내보내고 명시적인 width·height를 지정해 레이아웃 이동(CLS)을 막아야 한다. 대화 위젯 스크립트는 첫 페인트에 곧장 필요한 요소가 아니니, 히어로 텍스트가 먼저 그려진 뒤 지연 초기화하면 체감 속도가 눈에 띄게 빨라진다. 접근성 측면에서는 전송 버튼(검은 원형 화살표)과 Portfolio·Contact 필에 명확한 접근 가능한 이름을 주고, 장식용 별 풍선에는 빈 alt를 부여해 스크린리더 노이즈를 줄이는 편이 좋다. 흰 배경 위 옅은 회색 서브텍스트는 대비를 한 번 점검해 WCAG 기준 충족 여부를 확인하길 권한다.
디지털 파트너 더블루캔버스
플랜아이처럼 자체 AI 제품과 컨설팅을 함께 파는 B2B 기술 기업의 홈페이지는, 복잡한 서비스 라인을 방문자가 3초 안에 이해하도록 정리하는 정보 설계가 승부처다. The Blue Canvas는 이런 기술·SaaS 브랜드의 홈페이지 제작을 첫 화면 메시지 설계부터 제품별 랜딩, 전환 퍼널까지 한 흐름으로 잡는다. 대화형 위젯 같은 인터랙션이 검색 색인을 가리지 않도록 정적 콘텐츠와 병행 설계하고, Core Web Vitals를 지키는 웹디자인·프론트엔드 최적화, 그리고 도입 문의를 실제 리드로 바꾸는 SEO와 퍼포먼스 마케팅을 하나로 운영한다. 새 AX·AI 브랜드의 웹사이트 제작이나 리뉴얼을 고민한다면, 아래에서 The Blue Canvas의 작업을 확인해 보라.
마무리와 다음 스텝
플랜아이 웹사이트는 대화형 AI를 히어로 중앙에 올리고 전환 레일과 단색 팔레트로 브랜드를 절제 있게 정리한, 완성도 높은 첫인상을 만든다. 다듬을 지점은 셋이다. 첫째, 푸터에 몰린 제품·서비스 링크 일부를 히어로 하단으로 끌어올려 상단에서 곧장 닿는 텍스트 경로를 낸다. 둘째, 챗봇이 답하는 회사·서비스 정보를 정적 HTML 본문으로도 확보해 검색 색인과 접근성을 동시에 챙긴다. 셋째, 히어로 배경·풍선·카드 이미지를 차세대 포맷으로 최적화하고 대화 위젯을 지연 로딩해 LCP를 끌어내린다. 메시지는 이미 또렷하다. 그 메시지가 검색과 성능에도 그대로 실리도록 손보는 일이 남았다.