개요
NH-AMUNDI ETF 웹사이트는 ‘운용 철학의 신뢰성’과 ‘상품 선택의 빠른 판단’을 동시에 충족해야 하는 금융 서비스 특성을 지닙니다. 투자자는 보통 특정 키워드(지수, 섹터, 배당, 채권 듀레이션 등)로 진입해 상품을 비교하고, 성과 차트·보수·추종지수·편입비중·리스크 지표를 확인한 뒤 공시·PDF를 열람해 최종 결정을 내립니다. 따라서 첫 화면에서부터 핵심 지표에 빠르게 닿게 하는 정보 설계, 리스트/필터/정렬의 조합, 그리고 그래프의 일관된 축·범례·단위 표기가 신뢰를 좌우합니다. 본 리뷰는 이러한 실제 여정을 기준으로 현재 화면 구성의 강점과 마찰을 진단하고, 즉시 적용 가능한 UI 패턴과 카피 가이드를 제안합니다.
브랜드/가치 제안
NH-AMUNDI는 국내 투자자에게 글로벌 운용 전문성과 로컬 시장 이해를 결합한 ETF 라인업을 제공합니다. 브랜드 레벨에서 신뢰를 형성하는 문장과 시각 요소는 단순 미학을 넘어 투자 의사결정에 영향을 줍니다. 첫째, 헤더·푸터·상품 상세에 반복 노출되는 핵심 카피(운용 철학, 리스크 관리 프레임, 규정 준수 상태)를 ‘짧고 강한 태그라인’과 ‘근거 링크(공시/리포트)’로 연결하면 신뢰 점수가 상승합니다. 둘째, 색채·아이콘·버튼 톤을 통해 상품 성격(주식/채권/대체/멀티에셋)을 직관적으로 구분하면, 초보 투자자도 빠르게 맥락을 파악할 수 있습니다. 셋째, ‘장기·분산·비용’ 같은 투자 원리를 짧은 문장으로 상단에 노출하고 자세히 보기 버튼을 배치하면, 브랜드가 제안하는 투자 행동을 사용자 여정에 자연스럽게 녹일 수 있습니다.
UX/UI 구조와 상호작용
상품카드의 핵심 지표(1년/3년 수익률, 총보수, 추종지수, 거래대금)를 동일 위치·동일 형식으로 고정하면 ‘시선 점프’를 줄여 비교 속도를 높일 수 있습니다. 또한 차트 인터랙션(툴팁, 데이터 세트 토글, 기준선 표시)은 모바일에서 엄지 제스처 중심으로 단순화해야 합니다. 필터는 초보자에게는 ‘테마 기반(배당/성장/채권/ESG)’으로, 숙련자에게는 ‘지수/섹터/듀레이션/환헤지’로 이중 제공하면 정보 과부하를 방지합니다. 상세 화면에서는 ‘펀드 개요 → 성과 · 보수 → 보유 종목 → 공시/다운로드’의 고정 탭을 권장하며, 각 탭 상단에 요약 카드(지표 핵심 3개)를 배치해 스크롤을 줄입니다. 버튼 라벨은 ‘다운로드(요약공시 PDF)’처럼 행동/결과가 명확해야 하며, 위험고지/유의사항은 접기 상태로 시작하되 스티키 바에 ‘중요고지’ 배지를 노출해 규정 준수를 확보할 수 있습니다.
정보구조(IA)·검색(SEO)
카테고리-리스트-상세의 3단 구조에서 URL 체계와 마이크로카피가 검색성과 회수성(Findability)에 큰 영향을 줍니다. 상품 상세의 메타 태그에는 ‘ETF명 | 추종지수 | 총보수 | 분배 정책’의 핵심 정보를 포함하고, 구조화 데이터(Article/FinancialProduct)를 병행해 외부 검색 노출을 안정화합니다. 내부 검색(Query Suggestion)은 티커/키워드/지수명을 자동완성으로 연결하고, 오탈자 허용 범위를 넓히면 유입 손실을 줄일 수 있습니다. 또한 공시/리포트는 별도 아카이브로 모으되, 각 상품 상세에서 최신 1~2개를 바로 내려받을 수 있게 노출하는 ‘근거리 링크’ 전략이 좋습니다. 사이트맵은 상품·리포트·공시·교육콘텐츠로 분리 제공, 한글/영문 병기 시 영문 슬러그를 병행해 공유 호환성을 올립니다.
퍼포먼스·접근성
이미지 지연 로딩과 포맷 최적화(WebP/AVIF 병행)만으로도 LCP가 유의미하게 개선됩니다. 반복 아이콘·로고는 스프라이트 또는 아이콘 폰트로 묶어 요청 수를 줄이고, 차트 라이브러리는 모듈 단위로 지연 로드하여 첫 페인트를 가볍게 가져가야 합니다. 접근성 측면에서는 대비비(텍스트/배경 4.5:1), 포커스 스타일, 스크린리더 레이블(툴팁/탭/그래프 데이터)에 특히 유의합니다. 숫자·단위·기간(3M/1Y/3Y)은 스크린리더가 읽을 수 있게 title/aria-label을 보강하고, 키보드만으로 탭 전환·차트 토글이 가능해야 합니다. 폼(문의/구독)은 에러 메시지를 필드와 가까이 제공하고 상태 변화를 role=alert로 발화시키면 사용성이 좋아집니다. 모듈 캐시·CDN·ETag 정책으로 정적 리소스 재방문 성능도 함께 확보해야 합니다.
화면 갤러리
The Blue Canvas 소개
더블루캔버스(The Blue Canvas)는 복잡한 금융·B2B·공공 분야의 ‘정보 밀도 높은 화면’을 사용자 친화적 구조로 재설계하는 UX 컨설팅 스튜디오입니다. IA 재정의, 콘텐츠 모델링, 리서치 기반 카피라이팅, 컴포넌트 설계, SEO/접근성 품질관리까지 한 흐름으로 통합 제공합니다. 조직의 KPI와 사용자 목표 행동을 한 화면에서 만날 수 있도록, 불필요한 단계와 노이즈를 걷어내는 일이 우리의 전문역량입니다. 협업을 원하시면 아래 링크로 문의해주세요.
결론 및 다음 단계
NH-AMUNDI ETF 웹사이트는 상품 라인업과 지표 데이터가 명확히 정리되어 있어, 핵심 과제는 ‘더 빠른 비교’와 ‘모바일 우선 가독성’으로 요약됩니다. 단기적으로는 상품카드 지표 고정, 상세 탭 정렬, 공시 근거리 링크화, 차트 툴팁 가독성 개선을 권장합니다. 중기로는 검색 자동완성 품질 향상, 구조화 데이터 보강, 아이콘 스프라이트·지연 로딩을 통한 성능 최적화가 효과적입니다. 마지막으로 접근성 가이드(색 대비·포커스·키보드 조작)를 컴포넌트 레벨로 표준화하면 유지보수 효율과 규정 준수 모두에서 이점을 얻을 수 있습니다. 본 리뷰의 제안 사항을 순차 적용하면, 신규·경험자 모두에게 ‘빠르고 명확한’ ETF 경험을 제공할 수 있을 것입니다.