2004년 설립된 라이트브레인(RightBrain)은 하나은행, SK텔레콤, LG전자, 신세계백화점, 스타벅스 등 국내 대기업의 UX 컨설팅을 수행해 온 대한민국 대표 UX 디자인 에이전시입니다. “리서치, 컨설팅, 기획, 디자인”을 아우르는 통합 디지털 서비스를 표방하는 이 회사의 웹사이트가 자신들의 UX 철학을 어떻게 스스로 증명하고 있는지 해부해 보겠습니다.

첫인상: rightbrain.co.kr를 처음 열었을 때

RightBrain 메인 페이지 — 데스크톱 (1440×900)

페이지를 열면 거대한 세리프 타이포그래피 “RightBrain”이 화면 전체를 지배합니다. PublicoHeadline 계열의 클래식한 세리프체로 렌더링된 로고 타이프는 86px(데스크톱 기준)에 달하며, 한 화면에 브랜드 이름 하나만 남깁니다. 그 아래로 어두운 톤의 시네마틱 비디오/이미지 슬라이더가 전개되며 “Wake up at 6 am”이라는 의미심장한 카피가 등장합니다.

상단 좌측에는 20주년 기념 Lottie 애니메이션 뱃지(truly!)가 동작하고, 중앙에는 “We focus on providing integrated digital services covering research, consulting, planning and design”이라는 회사 슬로건이 작은 markot-medium 폰트로 배치됩니다. 우측 상단의 + 아이콘은 네비게이션 메뉴 토글입니다.

전체적인 인상은 “우리는 말로 설명하지 않고 보여준다”입니다. 텍스트를 최소화하고, 비주얼과 타이포그래피만으로 에이전시의 격을 전달하는 전략입니다.

기술 스택 해부

프레임워크 & CMS

라이트브레인은 WordPress 6.9.1 기반으로 운영됩니다. 단순한 블로그용 WordPress가 아니라, 프리미엄 테마와 플러그인으로 에이전시 사이트를 구현한 케이스입니다.

감지된 기술 스택:
─────────────────────────────
CMS         : WordPress 6.9.1
테마        : BeTheme 27.3.9 (Muffin Builder)
슬라이더    : Slider Revolution 6.7.10
Lottie      : RevSlider Lottie Addon 6.7.2
폼          : Contact Form 7 5.9.5
이커머스    : WooCommerce 9.8.7
분석        : Google Analytics (G-7B5W04FN5B)
UX 리서치   : Maze (snippet.maze.co)
CDN/이미지  : Jetpack (i0.wp.com)
보안        : reCAPTCHA
─────────────────────────────

흥미로운 점은 WooCommerce가 설치되어 있다는 것입니다. UX 에이전시 사이트에 이커머스 플러그인이 있는 건 약간 의외인데, 아마 RB Lab의 리포트나 교육 콘텐츠를 유료로 판매하거나, 향후 확장을 고려한 것으로 보입니다.

또 하나 눈에 띄는 것은 Maze 스니펫입니다. Maze는 UX 리서치 및 사용성 테스트 플랫폼인데, 자사 웹사이트에 직접 삽입해 실시간으로 사용자 행동을 분석하고 있다는 의미입니다. UX 에이전시다운 선택입니다.

렌더링 전략

WordPress의 기본 서버사이드 렌더링(SSR) 방식을 따릅니다. 별도의 headless CMS나 프론트엔드 프레임워크(React, Vue 등)를 사용하지 않고, PHP 기반 전통적 렌더링입니다. 다만 Slider Revolution이 클라이언트에서 무거운 DOM 조작을 수행하기 때문에, 실질적으로는 서버 렌더링 + 클라이언트 하이드레이션에 가까운 동작을 보입니다.

성능 고려사항

솔직히 말하면, 성능 측면에서는 개선 여지가 큽니다:

• jQuery 3.7.1 + jQuery Migrate 3.4.1 — 레거시 호환성 레이어가 여전히 로드됩니다
• Slider Revolution — 풀스크린 슬라이더만 최소 3개(헤더 고정, 프로젝트 쇼케이스, 비디오)를 사용하며, 각각 독립적인 JS 인스턴스
• WooCommerce 에셋 — 실제 이커머스 기능을 쓰지 않더라도 CSS/JS가 모든 페이지에 로드
• Lottie JSON — 20주년 애니메이션용 JSON 파일이 추가 네트워크 요청
• 12종 커스텀 폰트 — WOFF 파일만 12개, font-display: swap 설정이지만 초기 로딩 시 FOUT(Flash of Unstyled Text) 가능성

networkidle 상태까지 45초 이상 소요되어 Playwright 타임아웃이 발생했을 정도로, 초기 로딩이 무겁습니다. Slider Revolution의 복잡한 타임라인 애니메이션과 다수의 외부 리소스가 원인입니다.

실무 팁: 에이전시 사이트는 “와우 팩터”와 성능 사이의 트레이드오프가 항상 존재합니다. 라이트브레인은 비주얼 임팩트를 선택한 케이스인데, 요즘 트렌드는 GSAP + CSS 애니메이션으로 같은 효과를 훨씬 가볍게 구현하는 방향입니다.

디자인 시스템 분석

컬러 팔레트

라이트브레인의 컬러 시스템은 극도로 모노크로매틱합니다:

흑백을 기조로 하되, 프로젝트 쇼케이스의 비디오와 이미지가 유일한 컬러 요소로 작동합니다. 이 전략은 “콘텐츠(클라이언트 프로젝트)가 주인공이고, 사이트는 프레임”이라는 의도를 명확히 드러냅니다.

다크모드는 <meta name="theme-color">에서 light/dark 모두 #ffffff로 설정되어 있어, 별도의 다크모드를 지원하지 않습니다. 이미 사이트 자체가 흑백 대비로 구성되어 있어 큰 문제는 아닙니다.

타이포그래피

이 사이트의 가장 인상적인 요소는 12종의 커스텀 폰트 시스템입니다:

폰트	용도	특징
PublicoHeadline-Roman/Light	메인 히어로 타이틀	클래식 세리프, 에디토리얼 느낌
RBHeadline-Roman	자체 브랜드 헤드라인	라이트브레인 전용 커스텀 폰트
bigdailyshort-extralight	섹션 타이틀 (“On Going”)	이탤릭 세리프, 우아한 느낌
Markot (extralight/light/regular/medium)	UI 텍스트, 네비게이션	4가지 웨이트의 기하학적 산세리프
Pretendard (medium/semibold)	한글 본문	국내 표준 시스템 폰트급
DM Sans	폴백/시스템 기본	Google Fonts, 전체 body
Inter / Cardo	WooCommerce 기본	플러그인 내장 폰트

RBHeadline-Roman이라는 자체 제작 폰트가 존재한다는 점이 특히 주목할 만합니다. 에이전시가 자사 브랜딩을 위해 전용 서체를 제작한 건, 타이포그래피에 대한 진지한 태도를 보여줍니다.

기본 body 폰트는 DM Sans이며, Apple 시스템 폰트 스택(-apple-system, BlinkMacSystemFont, "Segoe UI"...)을 폴백으로 설정했습니다. 한글은 Pretendard가 담당합니다.

/* 실제 사이트의 폰트 스택 */
body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
               Cantarell, "Helvetica Neue", sans-serif;
}

실무 팁: 12개 폰트는 과감한 선택입니다. 일반적으로 웹 성능을 위해 3-4개를 권장하지만, 에이전시 사이트에서는 타이포그래피 다양성이 곧 디자인 역량의 증명이 됩니다. 다만 font-display: swap을 적용해 렌더링 차단을 방지한 점은 좋은 판단입니다.

레이아웃 & 그리드

페이지 구조는 수직 스크롤 기반의 풀위드 섹션 스택입니다:

1. 고정 헤더 — Slider Revolution 기반, position: fixed, z-index: 5000
2. 히어로 섹션 — 풀스크린 시네마틱 슬라이더 (비디오/이미지 로테이션)
3. Latest Projects — 포트폴리오 쇼케이스 (풀스크린 슬라이더)
4. SEE ALL PROJECTS — CTA 버튼
5. Ongoing Projects — 진행 중 프로젝트 리스트 (다크 배경)
6. RB Lab — 블로그/리서치 섹션
7. Footer — 연락처, 뉴스레터, 채용, 프로젝트 의뢰

반응형 브레이크포인트는 BeTheme 기본값을 따릅니다:

/* BeTheme 반응형 브레이크포인트 */
@media (max-width: 1240px) { /* 노트북 */ }
@media (max-width: 959px)  { /* 태블릿 */ }
@media (max-width: 767px)  { /* 모바일 가로 */ }
@media (max-width: 479px)  { /* 모바일 세로 */ }

모바일에서는 히어로 텍스트가 뷰포트 너비에 맞춰 리사이징되고, 슬라이더가 세로 비율로 전환됩니다. Slider Revolution의 setREVStartSize 함수가 디바이스별 크기를 명시적으로 제어합니다:

setREVStartSize({
  c: 'rev_slider_138_1',
  rl: [1240, 1024, 778, 480],   // 반응형 레벨별 너비
  el: [900, 768, 960, 720],     // 레벨별 높이
  gw: [2600, 1024, 778, 480],   // 그리드 너비
  gh: [900, 768, 960, 720],     // 그리드 높이
  type: 'standard',
  layout: 'fullscreen'
});

UX 패턴 깊이 파기

네비게이션

네비게이션은 미니멀 + 아이콘 방식입니다. 기본 상태에서는 좌측 로고(20주년 Lottie 뱃지 + 슬로건)와 우측 + 버튼만 보입니다. 메뉴 항목은:

• about — 회사 소개
• projects — 포트폴리오
• jobs — 채용
• contact — 연락처

4개뿐입니다. UX 에이전시답게 정보 구조를 최소한으로 압축했습니다. 사용자가 이 사이트를 방문하는 목적은 크게 “이 회사가 뭘 하는지 보기(projects)”, “일자리 찾기(jobs)”, “프로젝트 의뢰하기(contact)” 세 가지이고, 이를 정확히 반영합니다.

인터랙션 & 애니메이션

사이트의 핵심 인터랙션은 Slider Revolution 6.7.10이 전담합니다:

• 타이밍 기반 시퀀스 — 각 레이어에 data-frame_1="st:2810;sp:1450" 같은 밀리초 단위 타임라인이 설정되어 있어, 영상 편집처럼 정밀한 등장/퇴장 순서를 구현
• Lottie 통합 — 20주년 로고 뱃지가 SVG Lottie 애니메이션으로 무한 루프 재생 (endlessLoop: true, duration: 50000)
• 마스크 트랜지션 — data-clip="u:true", data-frame_0_mask="u:t" 속성으로 텍스트가 아래에서 올라오며 마스크가 벗겨지는 효과
• Scroll-Based Animation — data-sba="t:true;so:500ms" 속성으로 스크롤 위치에 반응하는 요소들
• Parallax — 배경과 전경 레이어가 서로 다른 속도로 이동

이 모든 것이 코드가 아니라 Slider Revolution의 비주얼 에디터에서 설정됩니다. 개발자 없이 디자이너만으로도 이 수준의 인터랙션을 구현할 수 있다는 것이 SR의 강점이자, 동시에 성능 비용의 원인이기도 합니다.

정보 구조 & 콘텐츠 전략

사이트의 정보 흐름은 명확한 역피라미드 구조입니다:

[브랜드 임팩트] → "RightBrain" 타이포 + 시네마틱 비디오
       ↓
[실력 증명]    → Latest Projects (신세계, 스타벅스, LG UX)
       ↓
[현재 진행형]  → Ongoing Projects (하나은행, SK텔레콤, SK하이닉스...)
       ↓
[지적 역량]   → RB Lab (UX 트렌드 리포트, UX Story, Design Tip)
       ↓
[행동 유도]   → Newsletter, Apply, Request Project

Latest Projects 섹션은 이미지와 프로젝트명만 큼직하게 보여주고, “Shinsegae Department Store”, “Starbucks UX Renewal”, “LGE UX Design” 같은 네임밸류로 승부합니다. 설명 텍스트 없이 이미지 하나로 임팩트를 주는 건, 포트폴리오 사이트의 정석입니다.

Ongoing Projects 섹션이 특히 인상적입니다. 다크 배경 위에 “On Going”이라는 이탤릭 세리프 타이틀과 함께, 번호-프로젝트명-시작연도 형태의 깔끔한 리스트가 펼쳐집니다:

01   하나은행 하나원큐 UX 리뉴얼       2025 ~
02   SK텔레콤 BSS 컨설팅              2025 ~
03   SK하이닉스 시스템 UX 컨설팅       2024 ~
04   LG전자 LGE.com 플랫폼 고도화     2021 ~
05   KT Genie TV 고도화              2015 ~

“2015 ~“부터 진행 중인 프로젝트가 있다는 건, 장기 파트너십을 유지하는 에이전시라는 신뢰 시그널입니다. 이 한 줄이 “우리가 잘합니다”라는 어떤 카피보다 강력합니다.

RB Lab 섹션은 자체 블로그/리서치 허브로, “UX Discovery SNAPSHOT”, “UX 트렌드 리포트 특별판”, “스페큘레이티브 디자인” 같은 콘텐츠를 발행합니다. UX 컨설팅 에이전시가 자체 리서치를 공개하는 건 마케팅이자 채용 브랜딩입니다.

SEO & 웹 표준

메타 태그 & 구조화 데이터

<html lang="ko-KR" itemscope itemtype="https://schema.org/WebPage">
<title>RightBrain – 라이트브레인 홈페이지</title>
<meta name="robots" content="max-image-preview:large">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

• Schema.org WebPage 마크업이 html 태그에 적용되어 있어 기본적인 구조화 데이터는 갖추고 있습니다
• lang="ko-KR"과 hreflang="ko-KR" 설정이 일치하여 검색엔진 언어 인식에 문제가 없습니다
• RSS 피드(/feed/, /comments/feed/)와 oEmbed 엔드포인트가 설정되어 있어 콘텐츠 신디케이션을 지원합니다
• maximum-scale=1이 설정되어 있는데, 이는 접근성 관점에서 권장되지 않습니다 (시각 장애인의 줌 기능 제한)

아쉬운 SEO 포인트

• 메타 description이 감지되지 않습니다 — 검색 결과에서 자동 추출된 텍스트가 표시될 수 있습니다
• OG(Open Graph) 태그가 HTML 소스에서 명시적으로 보이지 않아, SNS 공유 시 미리보기가 부족할 수 있습니다
• title이 “RightBrain – 라이트브레인 홈페이지”로 다소 평이합니다 — “UX 컨설팅”, “디자인 에이전시” 같은 키워드가 빠져 있습니다
• Slider Revolution 기반 콘텐츠는 검색엔진이 읽기 어렵습니다 — 핵심 프로젝트명이 RS 레이어 안에 있어 크롤러가 놓칠 수 있습니다

접근성

• 시맨틱 HTML: <header>, <main>, <footer>, role="main" 등 기본 구조는 갖추고 있습니다
• 이미지 alt 텍스트: 일부 이미지에 빈 alt="" 속성이 있어 스크린 리더에서 정보가 누락됩니다
• 키보드 네비게이션: Slider Revolution 내부 요소의 키보드 접근성은 제한적일 수 있습니다

배울 점 & 아쉬운 점

이 사이트에서 배울 것

1. 타이포그래피가 곧 디자인이다 — 12종의 폰트를 전략적으로 배치해, 이미지 없이도 섹션마다 다른 분위기를 연출합니다. PublicoHeadline의 클래식함, bigdailyshort의 우아함, Markot의 기하학적 정밀함이 조화를 이룹니다.

2. “진행 중 프로젝트” 공개의 힘 — 포트폴리오 사이트가 완료된 프로젝트만 보여주는 게 관행인데, “지금 뭘 하고 있는지”를 공개하는 건 투명성과 신뢰를 동시에 확보하는 전략입니다. 특히 10년째 진행 중인 프로젝트가 있다는 사실이 강력한 사회적 증거입니다.

3. 미니멀 네비게이션 — 4개 메뉴(about, projects, jobs, contact)로 정보 구조를 압축한 건, 사용자 목적에 대한 깊은 이해에서 나옵니다. UX 에이전시가 자사 사이트에서 이를 실천하는 건 설득력이 있습니다.

4. Lottie + Slider Revolution 통합 — 20주년 뱃지 애니메이션을 Lottie로 구현하면서 SR 내부에 통합한 건, WordPress 생태계 안에서 고급 인터랙션을 구현하는 좋은 레퍼런스입니다.

5. Maze 통합으로 자체 UX 리서치 — UX 에이전시가 자기 사이트에 사용성 테스트 도구를 삽입해 데이터를 수집하는 건, “우리가 하는 일을 우리 자신에게도 적용한다”는 최고의 증명입니다.

개선 여지

1. 성능 최적화 필요 — networkidle까지 45초 이상은 UX 에이전시로서 아이러니합니다. 사용하지 않는 WooCommerce 에셋 제거, 폰트 서브셋 최적화, Slider Revolution을 GSAP/CSS 기반으로 대체하면 극적으로 개선될 수 있습니다.

2. SEO 기본기 보완 — meta description, OG 태그, 구조화된 프로젝트 데이터(Schema.org CreativeWork) 추가가 필요합니다. Slider Revolution 내부 텍스트는 HTML 본문에도 중복 제공하는 것이 바람직합니다.

3. 접근성 강화 — maximum-scale=1 제거, 이미지 alt 텍스트 보완, Slider Revolution 내부 요소의 키보드 네비게이션 보장이 필요합니다.

4. 모바일 비주얼 개선 — 모바일에서 히어로의 대형 타이포그래피가 가로 폭에 꽉 차면서 프로젝트 슬라이더 텍스트(“on your private”)가 잘리는 현상이 보입니다. 모바일 전용 레이아웃 분기가 더 세밀하게 필요합니다.

5. 저작권 연도 업데이트 — 푸터에 ”© 2004-2024”로 표기되어 있는데, 현재 2026년이므로 업데이트가 필요합니다. 사소하지만 방문자에게 “관리되지 않는 사이트” 인상을 줄 수 있습니다.

마무리: 개발자가 가져갈 인사이트

라이트브레인 웹사이트는 “WordPress로도 에이전시급 사이트를 만들 수 있다”는 것과 “그 비용이 어디서 발생하는지”를 동시에 보여주는 사례입니다.

BeTheme + Slider Revolution 조합은 디자이너가 코드 없이 시네마틱 인터랙션을 구현할 수 있게 해주지만, 그 대가로 30개 이상의 CSS/JS 파일, 12종 폰트, 다수의 플러그인 에셋이 매 페이지에 로드됩니다. 요즘 트렌드인 Astro, Next.js, SvelteKit 같은 모던 프레임워크로 같은 비주얼을 구현하면 번들 사이즈를 1/10로 줄일 수 있습니다.

하지만 기술 스택 선택 너머에 있는 디자인 전략은 프레임워크에 관계없이 배울 가치가 있습니다:

• 타이포그래피만으로 브랜드 아이덴티티를 구축하는 방법
• 포트폴리오 사이트의 정보 구조를 사용자 목적에 맞춰 설계하는 방법
• “지금 하고 있는 일”을 공개해 신뢰를 구축하는 콘텐츠 전략
• 자사 사이트에 UX 리서치 도구를 통합해 자기참조적 개선 루프를 만드는 방법

20년 된 UX 에이전시의 웹사이트는 결국 “우리가 믿는 UX”의 살아있는 증거여야 합니다. 라이트브레인은 그 과제를 타이포그래피와 포트폴리오의 힘으로 풀어내고 있고, 성능이라는 숙제를 아직 안고 있습니다.

---