한컴은 한글과컴퓨터로 익숙한 이름이지만, ai.hancom.com은 AI 사업부의 독립 도메인입니다. “Intelligent Automation”이라는 슬로건 아래 AI, SDK, Office 세 가지 사업 축을 하나의 풀스크린 인터랙션으로 보여주는 기업 쇼케이스 사이트입니다.

프레임워크 없이 순수 CSS/JS만으로 이 정도 인터랙션을 구현한 점이 눈에 띕니다. 구조를 뜯어보겠습니다.

첫인상: 한컴AI를 처음 열었을 때

한컴AI 메인 페이지 — 데스크톱 1440×900

검은 배경 위에 “Intelligent Automation”이라는 대형 타이포그래피가 화면 하단에서 올라옵니다. 오른쪽 상단에서 시안 블루 광선이 대각선으로 내려오면서 시선을 텍스트 쪽으로 유도하는 구조입니다. 상단 네비게이션은 WELCOME, AI, SDK, OFFICE 네 섹션으로 나뉘고, 현재 페이지 번호(01/04)가 함께 표시되어 풀스크린 슬라이드 구조임을 바로 알 수 있습니다.

첫 로딩 시 Cookiebot 동의 배너가 하단을 차지합니다. GDPR 대응을 위한 것이지만, 히어로 타이포그래피의 하단부를 가려서 첫인상이 분산되는 점은 아쉽습니다. 왼쪽 사이드에는 “IN TOUCH” 세로 텍스트와 언어 선택(EN) 드롭다운이 붙어 있고, 이 레이아웃이 전체 섹션에 걸쳐 유지됩니다.

기술 스택 해부

프레임워크 & 아키텍처 패턴

한컴AI는 React, Vue, Next.js 같은 모던 프레임워크를 사용하지 않습니다. HTML + CSS + Vanilla JS로 구성된 정적 사이트에 가깝고, 인터랙션은 전적으로 외부 라이브러리에 의존합니다.

감지된 기술 스택:
- 프레임워크: 없음 (Vanilla JS)
- 애니메이션: GSAP (gsap.min.js)
- 슬라이더: Swiper (swiper-bundle.min.js/css)
- 쿠키 동의: Cookiebot (by Usercentrics)
- 분석: Google Tag Manager (GTM-WHBMFPFD)
- 보안: AWS WAF

왜 프레임워크 없는 구성인가? 이 사이트는 4개 섹션짜리 기업 소개 페이지입니다. SPA 라우팅이 필요 없고, 상태 관리도 불필요합니다. React를 도입하면 번들 사이즈만 늘어날 뿐 실질적 이점이 없는 유형입니다. GSAP + Swiper라는 검증된 조합으로 풀스크린 스크롤 전환을 구현한 것은 규모 대비 적절한 선택입니다.

다만 --vh-100: 900px, --vh: 9px 같은 CSS 변수를 보면 모바일 뷰포트 높이 문제(100vh 버그)를 JS로 계산해서 주입하고 있습니다. 이 패턴은 모바일 Safari에서 주소창 높이 때문에 100vh가 실제 화면보다 큰 문제를 우회하는 표준적인 해법입니다.

렌더링 & 호스팅

호스팅 인프라:
- CDN/WAF: AWS WAF (봇 방어 활성화)
- 정적 에셋: /static/ 경로 (css, js, img)
- CSS: ui.hancom.css + lang_ko.css (언어별 분리)
- 렌더링: 서버사이드 정적 HTML

CSS가 ui.hancom.css(공통 UI)와 lang_ko.css(한국어 전용)로 분리되어 있는 점이 특징적입니다. 5개 언어를 지원하면서 언어별로 타이포그래피나 레이아웃 미세 조정이 필요한 경우, 이렇게 언어 CSS를 분리하면 유지보수가 수월합니다. 다만 두 파일 모두 렌더 블로킹으로 로드되고 있어 초기 렌더 성능에 영향을 줍니다.

성능 이슈

squirrel audit에서 전체 점수 44점(F)을 받았습니다. 주요 병목은 렌더 블로킹 리소스입니다.

렌더 블로킹 리소스 (8개):
- ui.hancom.css
- lang_ko.css
- swiper-bundle.min.css
- swiper-bundle.min.js
- gsap.min.js
- ScrollTrigger.min.js
- ui.hancom.js
- main.js

GSAP과 Swiper가 동기 스크립트로 로드되면서 파싱을 차단합니다. defer 또는 async 속성 하나만 추가해도 체감 로딩 속도가 개선될 수 있습니다. 또한 이미지 3장(main-sec-4-img 시리즈) 모두 width/height 속성이 없어 CLS(레이아웃 시프트) 리스크가 있고, LCP 이미지에 대한 preload 힌트도 없습니다.

디자인 시스템 분석

컬러 팔레트

컬러 시스템은 극도로 단순합니다. --base-bg: #111(거의 블랙)에 --base-color: #fff(화이트 텍스트), 여기에 시안 블루 계열 그라데이션이 액센트 역할을 합니다. CSS 변수가 10개 미만으로, 체계적인 디자인 토큰이라기보다는 최소한의 테마 변수만 선언한 수준입니다.

다크모드 토글은 없습니다. 사이트 전체가 다크 테마로 고정되어 있고, AI/테크 기업이 선호하는 “어두운 배경 + 밝은 라이트” 패턴을 따릅니다. 히어로의 시안 블루 광선 효과가 이 어두운 배경 위에서 시각적 초점을 만들어주는 역할을 합니다.

타이포그래피

--base-font: Inter;

Inter를 기본 폰트로 사용합니다. 구글 폰트 중 가장 널리 쓰이는 산세리프체로, 가독성과 다국어 지원 모두 안정적입니다. 히어로의 “Intelligent Automation” 텍스트는 매우 큰 사이즈(추정 80 ~ 120px)에 얇은 웨이트를 적용해서 고급스러운 인상을 줍니다.

한국어 페이지에서는 lang_ko.css로 별도 타이포그래피 조정을 하고 있을 가능성이 높습니다. Inter는 한글을 포함하지 않으므로 시스템 폰트(Apple SD Gothic Neo, Malgun Gothic 등)로 폴백될 텐데, 이 간극을 CSS로 메꾸는 구조입니다.

레이아웃 & 반응형

데스크톱 vs 모바일 반응형 비교

레이아웃은 풀스크린 섹션 스크롤 방식입니다. 각 섹션(WELCOME, AI, SDK, OFFICE)이 뷰포트 전체를 차지하며, Swiper의 수직 슬라이드로 섹션 간 전환이 이뤄집니다. --vh-100 변수로 정확한 뷰포트 높이를 계산하고, clamp() 함수로 여백을 유동적으로 조절합니다.

--space-h-content-m: calc(clamp(5rem, 5.2083333333vw, 10rem) * -1);
--space-l-body: calc(10rem + clamp(5rem, 5.2083333333vw, 10rem));

이 clamp() 패턴은 미디어 쿼리 없이 반응형 여백을 처리하는 모던 CSS 접근법입니다. 5rem ~ 10rem 사이에서 뷰포트 너비에 비례해 자동으로 스케일링됩니다.

모바일에서는 상단 네비게이션이 햄버거 메뉴로 축소되고, “Scroll” 텍스트와 화살표가 하단에 표시되어 스크롤 유도를 합니다. 다만 모바일 스크린샷에서 Cookiebot 배너가 화면의 절반 이상을 차지하고 있어, 실질적인 콘텐츠가 거의 보이지 않는 상태입니다.

UX 패턴 깊이 파기

네비게이션

상단 네비게이션은 크게 두 영역으로 나뉩니다. 왼쪽에 WELCOME + 페이지 인디케이터(01/04), 오른쪽에 AI · SDK · OFFICE + 한컴 로고. 이 구조는 각 섹션이 곧 네비게이션 항목이 되는 앵커 네비게이션 패턴입니다.

왼쪽 사이드바에는 언어 선택 드롭다운(EN/한국어/Deutsch/Español/日本語)과 “IN TOUCH” 세로 텍스트가 고정되어 있습니다. “IN TOUCH”는 컨택트 폼으로의 바로가기로, 모든 섹션에서 접근 가능합니다. 오른쪽 하단에는 종이비행기 아이콘의 플로팅 버튼이 같은 역할을 합니다.

인터랙션 & 애니메이션

GSAP(GreenSock Animation Platform)이 핵심 애니메이션 엔진입니다. ScrollTrigger 플러그인과 함께 사용되어 스크롤 위치에 따른 요소 진입/퇴장 애니메이션을 처리합니다. 히어로의 “Intelligent Automation” 텍스트가 스크롤에 맞춰 올라오는 효과, 시안 블루 광선의 움직임 등이 GSAP으로 구현되었을 가능성이 높습니다.

--delay: 0 CSS 변수는 JS에서 애니메이션 딜레이를 동적으로 제어하기 위한 것으로 보입니다. 각 요소의 진입 타이밍을 CSS 변수로 주입하고, GSAP이 이를 읽어서 스태거 애니메이션을 만드는 패턴입니다.

두 번째 섹션에서는 비디오 재생 버튼이 포함된 이미지가 등장하며, “learn from each other and grow”라는 메시지와 함께 한컴AI의 비전을 전달합니다. 그 아래 “AI” 로고 + “Innovation AI solutions” 텍스트가 중앙에 배치됩니다.

정보 구조

4개 섹션의 흐름은 명확합니다:

1. WELCOME — “Intelligent Automation” 브랜드 메시지 + 비전 영상
2. AI — AI Innovation 사업 소개 카드 (“지속적인 혁신을 통해 모두의 업무와 생활을 더 편리하게”)
3. SDK — SDK Co-Prosperity 파트너십 소개 (“고객이 자사 제품에 새로운 가치를 더할 수 있도록”)
4. OFFICE — Hancom Office 소개 (“AI와 30년 생산성 기술의 결합”)

각 사업 카드에는 “Hancom Excellence” 라벨과 “See more about Hancom AI/SDK/Office →” CTA가 포함되어 있고, 카드 배경색이 각각 다릅니다(AI: 다크 그레이, SDK: 그레이, OFFICE: 블루). 하단에는 “Hancom makes”라는 텍스트가 별도 섹션으로 존재하는데, 이 텍스트 애니메이션이 섹션 전환 시 나타나면서 사업부 소개로의 전환을 자연스럽게 이어줍니다.

SEO & 웹 표준

squirrel audit 결과를 종합하면 SEO 기본기에 공백이 있습니다.

항목	점수	상태
접근성	88	양호
Core SEO	74	경고
보안	71	경고
성능	78	경고
구조화 데이터	44	미흡
E-E-A-T	53	미흡
이미지	58	미흡

주요 문제점:

• 타이틀이 “Hancom” 6자 — 브랜드명만 있고 키워드가 전혀 없습니다. “한컴AI - Intelligent Automation | AI·SDK·Office 솔루션” 수준이 적절합니다.
• 메타 디스크립션 32자 — “한컴AI가 만드는 Intelligent Automation”으로 너무 짧습니다. 검색 결과에서 잘리지 않을 120 ~ 160자 범위로 확장이 필요합니다.
• canonical URL 미설정 — /ko와 /ko/ 두 경로가 302 리다이렉트로 연결되면서 중복 URL 문제가 발생합니다.
• sitemap.xml 미존재 — 8개 sitemap 경로를 프로빙했으나 모두 유효하지 않습니다.
• VideoObject 스키마 없음 — 비디오 요소가 있지만 구조화 데이터가 없어 리치 스니펫 기회를 놓치고 있습니다.

보안 측면에서는 Content-Security-Policy, HSTS, X-Frame-Options 헤더가 모두 빠져 있습니다. AWS WAF로 봇 방어는 하고 있지만, 표준 보안 헤더가 없는 것은 기업 사이트로서 개선이 필요합니다.

배울 점 & 아쉬운 점

참조할 만한 기술

1. clamp()를 활용한 미디어쿼리 프리 반응형 여백

/* 미디어 쿼리 없이 5rem ~ 10rem 사이에서 자동 스케일링 */
--space-h-content-m: calc(clamp(5rem, 5.2083333333vw, 10rem) * -1);

이 패턴은 브레이크포인트마다 여백을 개별 지정하는 것보다 유지보수가 쉽고, 중간 해상도에서도 자연스러운 비율을 유지합니다. 5.2083vw는 1920px 기준으로 정확히 100px이 되는 값으로, 계산이 잘 설계되어 있습니다.

2. CSS 변수로 뷰포트 높이 주입

--vh-100: 900px;  /* JS에서 window.innerHeight 주입 */
--vh: 9px;        /* 1vh 단위 */

모바일 Safari의 100vh 버그 우회 패턴입니다. height: var(--vh-100) 형태로 사용하면 주소창 유무와 관계없이 정확한 뷰포트 높이를 보장합니다. 2026년 기준으로는 dvh(dynamic viewport height) 단위가 있지만, 레거시 브라우저 지원이 필요하다면 여전히 유효한 방법입니다.

3. 언어별 CSS 분리 전략

ui.hancom.css    → 공통 UI 스타일
lang_ko.css      → 한국어 전용 오버라이드

다국어 사이트에서 CJK 폰트의 line-height, letter-spacing이 라틴 폰트와 다른 문제를 언어별 CSS 파일로 해결하는 방식입니다. 조건부 로딩까지 구현하면 불필요한 CSS를 줄일 수 있습니다.

개선 여지

• 렌더 블로킹 스크립트 8개 — GSAP, Swiper 등을 defer 또는 dynamic import로 전환하면 FCP가 개선됩니다.
• 이미지 최적화 부재 — 348KB JPG, 277KB PNG가 width/height 없이 로드됩니다. WebP 변환 + 사이즈 속성 추가가 필요합니다.
• Cookiebot 배너 UX — 특히 모바일에서 화면의 60% 이상을 가려 첫인상을 해칩니다. 하단 슬림 배너나 스크롤 후 노출 방식을 고려할 수 있습니다.
• 콘텐츠 빈약 — 255단어로 thin content 판정을 받았습니다. 풀스크린 인터랙션의 시각적 임팩트는 있지만, 검색 엔진이 읽을 텍스트가 부족합니다.

배울 점: 개발자가 가져갈 기술적 인사이트

1. “프레임워크 없음”도 아키텍처다. 4페이지짜리 기업 쇼케이스에 React를 도입하면 오버엔지니어링입니다. GSAP + Swiper + Vanilla JS 조합이면 번들 사이즈를 최소화하면서도 풀스크린 인터랙션을 충분히 구현할 수 있습니다. 도구 선택의 기준은 “트렌드”가 아니라 “요구사항 규모”입니다.

2. CSS clamp()는 반응형 여백의 게임체인저다. 미디어 쿼리 5개를 쓰는 대신 clamp(min, preferred, max) 한 줄로 모든 뷰포트에서 자연스러운 비율을 유지할 수 있습니다. 특히 5.2083vw처럼 특정 기준 해상도에서 원하는 px 값이 나오도록 역산하는 테크닉은 실무에서 바로 쓸 수 있습니다.

3. 다국어 사이트의 CSS 분리는 초기 설계가 중요하다. 한컴AI처럼 5개 언어를 지원하는 경우, CJK와 라틴 폰트의 렌더링 차이를 하나의 CSS로 억지로 맞추면 유지보수가 지옥이 됩니다. 언어별 CSS 파일을 처음부터 분리하고, <html lang="ko">에 따라 조건부 로딩하는 것이 깔끔합니다.

자주 묻는 질문 (FAQ)

Q. GSAP은 상용 프로젝트에서 무료로 사용할 수 있나요?

GSAP의 기본 라이브러리(gsap.min.js, ScrollTrigger 등 대부분의 플러그인)는 상용 프로젝트에서 무료입니다. 다만 MorphSVG, DrawSVG, SplitText 같은 일부 프리미엄 플러그인은 Club GSAP 멤버십이 필요합니다. 한컴AI 수준의 스크롤 기반 애니메이션은 무료 플러그인만으로 충분히 구현 가능합니다.

Q. 풀스크린 섹션 스크롤 방식의 접근성 문제는 없나요?

있습니다. 스크롤 하이재킹(scroll hijacking)은 사용자의 기대와 다른 스크롤 동작을 강제하기 때문에, 키보드 네비게이션이나 스크린 리더 사용자에게 혼란을 줄 수 있습니다. 한컴AI의 접근성 점수가 88점으로 비교적 양호하지만, role="region", aria-label, 키보드 포커스 관리를 추가하면 더 나아질 수 있습니다.

Q. CSS의 dvh 단위가 있는데 왜 아직 JS로 뷰포트 높이를 계산하나요?

dvh(dynamic viewport height)는 2023년부터 주요 브라우저에서 지원되지만, 한컴AI처럼 글로벌 기업 사이트는 레거시 브라우저(특히 구형 삼성 인터넷, WebView 등)까지 고려해야 합니다. JS 폴백과 dvh를 함께 사용하는 height: 100dvh; height: var(--vh-100); 패턴이 가장 안전한 접근입니다.

---