AI 바이브코딩을 활용한 하이웍스 홈페이지 개선
기존 하이웍스 홈페이지를 분석하고 Figma Make로 직접 구현까지 진행했습니다.
'친숙함'에서 '전문성과 신뢰감'의 이미지로 홈페이지를 개선했습니다.
Vibe Coding
AS IS
기존 하이웍스 홈페이지는 친근하고 부드러운 인상을 기반으로 구성되었습니다.
Target
하지만 '친근함'은 하이웍스의 타겟 기업에 최적의 접근 방식이 아닙니다.
실제 하이웍스의 타겟은 100인 이상 중·대형 기업으로, B2B 의사결정자를 설득해야 합니다.
• 목표 고객군 (Ideal Customer Profoile)
기업 규모
근로자 100인 이상 중견·대형 기업
업종
제한 없음
매출
800억 이상 안정적 기반 기업 ex) 쌍방울, 태광그룹 등
현재 기술 환경
엑셀·수기 행정 또는 노후화된 자체 시스템 운영 중
구매 예산
그룹웨어 운영에 연 500만원 이상 투자 중
구매 성숙도
디지털 전환 필요성 인식 + 내부 지시 또는 경영진 압박 있는 상태
• 구매 의사결정자 (Buyer Persona)
직무
인사, 총무, 경영지원, 전산, IT, DX/AX팀 담당자
직급
과장급 이상의 기안자 및 최종 의사결정권자
핵심 KPI
• 기존 시스템과의 연동 및 안정성
• 예산 내 도입 비용 절감
• 업무 자동화로 인한 ROI
Pain Point
• 노후 시스템으로 인한 업무 비효율 (강화되는 노동법, 시스템 자동화 등)
• 마이그레이션 비용 및 안정성에 대한 우려
• AX 및 업무 시스템 도입에 대한 내부 지시 또는 경영진 압박을 느낌
Target
그래서 ‘친근함’보다는 ‘전문적이고 신뢰감’ 있는 이미지로 의사결정권자를 설득하고자 합니다.
REASON
의사결정자 = 리스크 관리자
• 그룹웨어 = 전사 시스템 투자
• 실패 시 책임이 따르는 큰 결정
REASON
큰 도입 비용과 리스크
• 기존 시스템 연동과 마이그레이션 우려
• 연 500만원 이상 예산 집행
REASON
변화에 보수적인 태도
• 필요성은 인지하지만 리스크 회피 성향
• 성공 사례와 데모에 반응
Positioning Map
20개의 경쟁사 웹페이지를 분석하며 하이웍스의 포지션을 설정했습니다.
Key Words
“신뢰 / 기술력 / 전문성”을 컨셉 키워드로 잡았습니다.
Design Concept
리퀴드 글라스(Liquid Glass)를 디자인 컨셉으로 시각적으로 집중도를 높였습니다.
REASON
리퀴드 글라스:
기술과 신뢰를 표현하는 방식
리퀴드 글라스의 굴절과 깊이감은 미래지향적인
기술 이미지를 전합니다. 블러 중심의 글래스모피즘보다 더 견고하고 정제된 인상을 줍니다.
AS IS - TO BE
이러한 분석을 바탕으로,
다음과 같이 하이웍스 홈페이지를 개선했습니다.
Main Banner
기존과 달리, 배너를 풀스크린으로 확장해 노출했습니다.
또한 배너에서도 리퀴드 글라스를 핵심 요소로 강조했습니다.
As is
배너 부분적 사용
To be
배너 전체(Full screen) 사용
Hiworks Main
하이웍스 AI를 메인에 추가하고,
서비스 설명과 배너가 한눈에 들어오도록 구조를 재배치했습니다.
As is
페이지를 넘어가는 구성
To be
한눈에 들어오는 구성, AI 추가
Function & Banner
기능 설명 영역에서는 개별 기능보다 상위 개념 중심으로 구조를 정리했습니다.
또한 하이웍스의 1위 성과는 별도의 배너로 분리해 강조했습니다.
As is
기능 - 하이웍스 가치
To be
기능 - 1위 강조 배너 - 하이웍스 가치
Hiworks Value
다크모드로 분위기를 전환시키고, 리퀴드 글라스를 강조한 디자인으로 개선했습니다.
As is
라이트 모드, 미니멀
To be
다크 모드, 리퀴드 글라스
Event
필요 없는 여백을 없애 카드를 좌우로 채우고,
이벤트 섹션을 추가해 사용자의 전환을 유도할 수 있도록 했습니다.
As is
과한 여백
To be
여백 최소화, 이벤트 섹션 추가
Home
Portfolio