개요
카카오 지속가능성(sustainability.kakao.com)은 카카오의 ESG 활동을 한곳에 모은 공식 허브입니다. 이런 장르의 사이트는 보고서 PDF를 내려받는 창구에 머물기 쉽습니다. 카카오는 다른 길을 택했습니다. 민트에서 옐로로 흐르는 그라디언트 위에 '사람을 이해하는 기술로 함께 만드는 필요한 미래'라는 문장을 올리고, 3D 와이어프레임 그리드와 카카오프렌즈를 연상시키는 라인 드로잉으로 첫 화면부터 브랜드의 표정을 살렸습니다. 이번 리뷰는 무거운 ESG 주제를 카카오다운 웹디자인 언어로 어떻게 번역했는지, 그리고 보고서·아젠다·소식으로 이어지는 정보 흐름이 얼마나 매끄러운지를 살핍니다.
브랜드 & 메시지
블랙 헤더의 글로벌 내비게이션은 추진전략, 사람중심 기술, 책임있는 경영, 기술·환경, 상생 프로젝트 순으로 전략 축을 그대로 메뉴에 옮겼고, EN 토글로 글로벌 이해관계자까지 배려합니다. 히어로가 특히 영리합니다. Human-Centered Technology, Responsible Management, Growing Together라는 영문 라벨이 그리드 위 좌표처럼 찍혀 있는데, 이 세 좌표가 스크롤을 내리면 01 사람중심 기술, 02 함께하는 상생, 03 책임있는 경영이라는 넘버링 섹션으로 그대로 이어집니다. 선언과 본문이 한 몸으로 설계된 구조입니다. CTA는 '보러가기'로 통일해 톤을 유지하다가, 페이지 끝 옐로 밴드의 '보고서 보러가기'에서 지속가능성 보고서라는 최종 목적지로 수렴시킵니다.
UX/UI 관점
화면에서 확인한 강점은 뚜렷합니다. 첫째, 픽셀 도트 모티프의 일관성. 아젠다 아이콘부터 화살표, 푸터 위 하트 그래픽까지 도트 하나로 아이덴티티를 밀고 나갑니다. 둘째, 매거진형 에디토리얼 그리드. 01~03 섹션이 큰 숫자 타이포와 함께 지그재그로 어긋나며 리듬을 만들어, 기업 사이트 특유의 단조로움이 없습니다. 셋째, 절제된 팔레트. 블랙·화이트 베이스에 옐로만 포인트로 써서 현장 사진의 색이 온전히 살아납니다. 넷째, '지속가능성 중점 아젠다' 블랙 섹션은 AI 안전·기술윤리부터 기후변화 대응, 신뢰 경영까지 10개 아젠다를 도트 아이콘 그리드 한 화면으로 요약합니다. 다섯째, 소식 카드의 News/Story 라벨과 날짜 메타가 콘텐츠 성격을 클릭 전에 알려줍니다. 히어로 바로 아래 캐러셀이 2025 보고서, AI 루키 캠프, 친환경 데이터센터 같은 최신 활동을 즉시 노출하는 점도 UX/UI 완성도를 끌어올립니다.
IA·SEO 전략
ESG 허브의 검색 성패는 보고서 콘텐츠를 얼마나 웹으로 꺼내느냐에 달려 있습니다. PDF 안에 갇힌 성과 데이터는 검색엔진이 제대로 읽지 못하므로, 핵심 지표와 사례를 HTML 페이지로 발행해 'ESG 경영 사례' 같은 검색어의 유입 지면을 만드는 편이 유리합니다. 중점 아젠다 10개는 각각 고유 URL과 개별 title·description을 갖춘 상세 페이지로 확장할 가치가 있습니다. 소식 게시물에는 NewsArticle 구조화 데이터와 발행일을 명시해 뉴스성 노출을 노리고, EN 버전이 있는 만큼 hreflang 정합성도 챙겨야 합니다. 넘버링 섹션의 화살표 아이콘 링크는 크롤러와 스크린리더 모두를 위해 맥락 있는 텍스트 앵커를 병기하길 권합니다.
성능·접근성
첫인상을 책임지는 히어로의 그라디언트·와이어프레임·일러스트가 LCP를 좌우합니다. 이 요소들을 비트맵이 아닌 SVG나 CSS로 처리하면 용량과 선명도를 동시에 잡을 수 있습니다. 캐러셀과 소식 카드의 사진에는 명시적 width/height와 지연 로딩을 적용해 CLS를 막고, 영문 모노스페이스 라벨 폰트는 서브셋으로 줄이는 것이 좋습니다. 블랙 배경 섹션은 대비 면에서 유리하지만, 옐로 밴드 위 버튼의 키보드 포커스 링 가시성은 별도로 점검할 항목입니다. 캐러셀 자동 전환이 있다면 정지 컨트롤과 prefers-reduced-motion 대응까지 갖춰야 도트 그래픽의 감각이 접근성 비용 없이 유지됩니다.
디지털 파트너 더블루캔버스
카카오 지속가능성이 보여주듯, 잘 만든 ESG·브랜드 사이트는 보고서를 다운로드 파일이 아니라 브랜드 경험으로 바꿉니다. 기업 사이트나 브랜드 허브의 홈페이지 제작을 고민하고 있다면, 필요한 것은 예쁜 화면이 아니라 전략 축을 정보 구조로 옮기는 설계입니다. The Blue Canvas는 기획부터 웹사이트 제작, 검색엔진최적화(SEO), 퍼포먼스 마케팅까지 한 팀이 이어서 실행합니다. 콘텐츠가 검색에 잡히는 구조를 먼저 설계하고, 브랜드 아이덴티티가 화면 곳곳에 살아 있는 웹디자인으로 완성한 뒤, 데이터로 전환을 검증합니다.
마무리와 다음 스텝
카카오 지속가능성은 도트 그래픽과 옐로 한 색으로 ESG 커뮤니케이션에 브랜드의 체온을 입힌 드문 사례입니다. 선언(히어로)—구조(3축 넘버링)—증거(아젠다·소식)—행동(보고서 보러가기)으로 이어지는 흐름도 탄탄합니다. 다음 스텝으로는 세 가지를 제안합니다. 보고서 핵심 콘텐츠의 HTML화로 검색 유입 지면을 확보할 것, 아젠다 10종을 개별 상세 페이지로 확장해 내부 링크망을 짤 것, 히어로 그래픽의 벡터화로 LCP를 관리할 것. 이 셋만 실행해도 지금의 감각적인 화면이 검색과 성능에서도 같은 점수를 받게 됩니다.