Case Study · Redesign
KERI
Enhancing a professional and reliable brand image and crafting intuitive experiences.
Visit live site ↗01Problem
원본 사이트의 어떤 점이 문제였나?
정보 위계가 약함
메인 화면에서 어디를 먼저 봐야 할지 모호해, 핵심 공지와 연구 정보가 시각적으로 묻혔다.
신뢰감이 부족한 톤
공공 연구기관 사이트인데 색과 타이포가 가벼워, 전문성과 신뢰가 충분히 전달되지 않았다.
분산된 탐색 동선
메뉴와 콘텐츠가 사용자 목적별로 묶이지 않아, 원하는 정보에 닿기까지 클릭이 많았다.
02Goal
그래서 무엇을 개선하려 했나?
전문적이고 신뢰감 있는 브랜드 인상
안정적인 색·타이포로 기관에 어울리는 무게감을 준다. (Problem 2와 연결)
직관적인 정보 탐색
위계와 그룹핑을 명확히 해 핵심 정보에 빠르게 닿게 한다. (Problem 1·3과 연결)
03Process
디자인 → 퍼블리싱 → 인터랙션, 각 결정의 근거
딥 톤 팔레트와 타이포 스케일로 위계 재정의
히어로 → 내비게이션 → 공지 순으로 시선이 흐르도록 대비와 여백을 재설계했다.
원본의 가벼운 색 대신 안정적인 톤을 먼저 잡아 기관의 신뢰감을 시각적으로 확보하기 위해서.
시맨틱 마크업 + 유연한 그리드로 반응형 대응
의미 기반 태그로 구조를 짜고, 화면 폭에 따라 카드·메뉴 배치가 자연스럽게 재배열되도록 했다.
접근성과 유지보수를 고려해, 표현이 아니라 의미로 마크업을 구성하기 위해서.
스크롤 기반 단계적 노출과 카드 인터랙션
스크롤에 맞춰 콘텐츠가 순차적으로 드러나고, 카드에 가벼운 호버 반응을 더했다.
정보를 한 번에 쏟지 않고 단계적으로 보여, 방문자의 인지 부담을 낮추기 위해서.
04Before / After
원본 vs 리디자인
05Retrospective
배운 점 · 다음에 더 잘할 것
- 제한된 5일 안에서 '신뢰감'이라는 추상적 목표를 색·위계 같은 구체적 결정으로 번역하는 감을 잡았다.
- 반응형에서 히어로·메뉴·공지의 우선순위를 정하는 기준을 세웠다.
- 다음엔 실제 사용자 대상의 간단한 탐색 테스트로 메뉴 라벨을 검증해보고 싶다.