한빛은행 디지털 리뉴얼

② 탐색 진행 중

한빛은행/hanbit-renewal.seoha.design/업데이트 12분 전

금융신뢰대담

서도하유채태리드 김서연 · 6명 참여

브리프

②탐색③수렴④빌드②–④ 반복 루프

⑤학습

③ 수렴

내부 후보를 고르고, 고객은 라이브 프로토타입에서 리뷰합니다. 고객 코멘트는 실행 가능한 지시로 번역되고, 확정한 방향에서 토큰을 추출합니다.

후보 비교

내부 투표 16표 · 후보 2개

v01숫자 중심 신뢰형

서김서연 · 라운드 2

후보

“숫자는 크게, 장식 없이, 여백으로 위계”

내부 투표7표 · 44%

v02다크 대담형

도이도윤 · 라운드 2

방향 후보

“은행 같지 않게. 한 가지 형광 포인트, 직각, 큰 국문 타이포”

내부 투표9표 · 56%

고객 피드백 → 지시 번역

승인한 지시만 신호로 기록됩니다

고객 마케팅팀 · 박 과장

“너무 차가워 보여요”

v02 · 히어로컬러

에이전트 번역 · 감도 사전 ‘차갑다’ → 웜 톤 보정 (11명 사용)

고객 디지털전략팀 · 이 차장

“숫자가 더 눈에 띄었으면”

v02 · 콘텐츠 섹션타이포

에이전트 번역 · 공통 DNA ‘숫자는 크게, 장식 없이’ (42회 · 채택률 81%)

고객 마케팅팀 · 박 과장

“경쟁사랑 비슷해 보여요”

v02 · 전체레이아웃

에이전트 번역 · 감도 사전 ‘AI 같아(부정)’ → 17명 사용

방향 확정 → 토큰 추출

확정하면 v02 다크 대담형의 시안에서 컬러 · 타입 스케일 · 라운드 · 간격 토큰을 자동 추출하고, 서하 공통 DNA 규칙과 대조합니다. 추출된 토큰은 ④ 빌드의 모든 페이지 생성 기준이 됩니다.

모티프 시스템 · 모션 토큰 확정

방향 확정 후 자동 제안됨 · 지금은 v02 기준 초안이며 바로 조정할 수 있습니다.

스마일확정 모티프

고객의 웃음을 은행이 지키는 가치로 · 브랜드 가이드 p.12 · 고객 인터뷰

후보

영역별 강도표

영역	0없음	1추상 흔적	2상징 그래픽	3캐릭터	4행동·애니메이션	미리보기
메인 히어로반응형 캐릭터						HANBIT 서비스상품소식고객센터로그인 NEW 한빛 돈의 흐름을다시 설계하다 시작하기 맞춤 추천 필요한 순간에 바로 닿는 서비스 빠른 상담 필요한 순간에 바로 닿는 서비스 혜택 모아보기 필요한 순간에 바로 닿는 서비스 © HANBIT · 개인정보처리방침 · 이용약관
섹션 전환·로딩패턴 · 로딩 곡선						상징 그래픽
버튼 호버·빈 상태미소 곡률만						추상 흔적
목록·폼·결제모티프 없음						모티프 없음

모션 토큰

속도 (duration)

motion.fastms
호버 · 토글
motion.basems
버튼 · 칩 · 상태 피드백
motion.slowms
섹션 전환 · 등장
motion.cinematicms
히어로 연출 · 캐릭터 동작
motion.stagger80ms · 순차 등장 간격

이징 (easing)

ease.standard(0.2, 0, 0, 1)기본 이동
ease.emphasized(0.3, 0, 0, 1.2)캐릭터 · 살짝 넘치는 반동
ease.decelerate(0, 0, 0, 1)들어오는 요소
ease.exit(0.3, 0, 1, 1)나가는 요소

강도 단계 (level steps)

motif.level.0없음α 0.18 · ×0.6
진폭 0.6
motif.level.1추상 흔적α 0.35 · ×0.8
진폭 0.6
motif.level.2상징 그래픽α 0.7 · ×1
진폭 0.85
motif.level.3캐릭터α 1 · ×1.15
진폭 1
motif.level.4행동·애니메이션α 1 · ×1.2
진폭 1.25

체험형 페이지 기법 확정

메인체험형최대 강도 4

핵심 기법보조 기법

커서 반응: 비용 중간공수 MJS 8KB · GPU 낮음
모바일: 터치 위치 · 자동 시선 이동
움직임 줄이기: 정면 응시 정지
스크롤 패럴럭스: 비용 중간공수 MJS 6KB · GPU 중간
모바일: 2겹으로 축소 · 이동 폭 절반
움직임 줄이기: 겹 고정

성능 예산 내 · JS 14KB / 180KB

브랜드 스토리체험형최대 강도 3