개요 및 리뷰 범위
본 문서는 올라운드프렌즈 웹사이트를 대상으로 브랜드 경험과 디지털 제품의 사용성 관점에서 핵심 영역을 점검한 UX/UI 리뷰입니다. 정보 설계(Information Architecture), 내비게이션 전략, 화면 구성, 컴포넌트 일관성, 문장 톤앤매너, 접근성 표준(대체 텍스트, 대비, 구조화된 마크업), 성능과 SEO 관점까지 전 과정을 폭넓게 다룹니다. 실무에서 바로 활용 가능한 체크리스트 중심으로 강점과 개선 포인트를 함께 제시하고, 변경 시 기대되는 지표 개선 효과(이탈률, 체류시간, 탐색 깊이, 전환율)까지 연결해 설명합니다.
리뷰는 퍼블릭한 화면 기준으로 진행되며 내부 정책 또는 특정 캠페인에 한정된 비공개 콘텐츠는 제외합니다. 또한 디자인 리소스의 실제 소스 파일은 보유하지 않았기에 화면을 통해 유추 가능한 상호작용 패턴과 가시성·피드백을 중심으로 평가했습니다. 모든 제안은 구현 난이도와 파급 범위를 함께 고려해 우선순위를 부여했으며, 단기적으로는 레이아웃·카피·컴포넌트 정합성 개선, 중기적으로는 디자인 토큰과 컴포넌트 시스템 정비, 장기적으로는 검색·추천·개인화 등 탐색 효율을 높이는 제품 전략까지 단계적으로 제시합니다.
브랜드 아이덴티티와 커뮤니케이션
올라운드프렌즈의 핵심 정체성은 이름에서 드러나듯 다양한 상황을 아우르는 친근함입니다. 이 가치를 온전히 전달하려면 로고·타이포·컬러·일러스트레이션·사진 톤이 하나의 서사로 묶여야 합니다. 현재 공개된 화면을 기준으로 보면 상단 히어로 영역에서 메시지 집중도는 양호하나, 하위 섹션에서 서브 컬러와 보조 그래픽 사용이 다소 제각각이라 브랜드 인상도가 희석될 수 있습니다. 톤앤매너 가이드를 간소하게라도 문서화하고, 버튼·배지·배경 블록에 쓰이는 컬러를 6~8개 디자인 토큰으로 축약하여 변형 가능 범위를 정의하면 일관성을 크게 끌어올릴 수 있습니다.
카피도 중요합니다. 첫 스크린에서 사용자에게 가장 먼저 주고 싶은 한 문장을 핵심 태그라인으로 고정하고, 섹션별 소제목은 기능 나열이 아니라 효익(benefit) 중심으로 재정렬하는 편이 좋습니다. 예를 들어 “무엇을 제공하는지”보다 “사용자가 무엇을 얻는지”를 드러내면 검색 유입 이후의 체류를 늘릴 수 있습니다. 이미지 대체 텍스트는 단순 파일명 기술이 아니라 시각 정보의 의미를 설명하는 방식으로 개선하고, OG 이미지·메타 설명 문구를 캠페인 맥락에 맞추어 A/B 테스트하면 공유와 재방문율 개선에 기여합니다.
UX 정보구조와 내비게이션
정보구조(IA)는 사용자가 길을 잃지 않도록 돕는 지형도입니다. 글로벌 내비게이션에서는 5±2 항목 원칙을 지키고, 드롭다운 혹은 메가메뉴를 사용할 경우 2단계 깊이를 넘지 않도록 제한해 탐색 복잡도를 관리하는 것이 바람직합니다. 또한 길찾기 단서를 강화하기 위해 현재 위치를 알려 주는 브레드크럼과 섹션 내부 점프 링크를 제공하면 회귀와 비교 탐색이 쉬워집니다. 모바일에서는 탭바 상호작용을 활용해 상위 3~4개 동선을 좌우 스와이프 없이 접근 가능하도록 구성하는 것이 체감 효율을 높입니다.
검색 의도가 다양한 서비스 특성상 리스트 화면에서는 정렬·필터·태그의 조합을 통해 빠른 스캐닝을 지원해야 합니다. 카드 컴포넌트는 썸네일·타이틀·짧은 설명·행동(예: 자세히 보기)으로 간결하게 구성하고, 카드 간격·그리드 규칙을 고정해 스크롤 리듬을 안정화합니다. 세그먼트별 주요 과업(가입·문의·다운로드 등)은 상단·하단에 반복 배치하여 언제든 행동으로 이어지게 하고, 폼은 단계 분할과 인라인 검증을 통해 오류 복구 비용을 최소화합니다. 이 모든 변화는 평균 페이지 심도와 전환율의 상승으로 이어질 가능성이 큽니다.
UI 시스템과 컴포넌트 일관성
UI는 반복 가능한 구성요소의 체계입니다. 버튼(기본·서브·텍스트), 입력창, 알림, 배지, 카드, 모달, 스텝퍼 등 핵심 컴포넌트에 대해 상태(기본·호버·포커스·비활성)와 공간 규칙(그리드, 여백, 라운드, 그림자)을 토큰 기반으로 정의하면 페이지가 늘어나도 균질한 인상을 유지할 수 있습니다. 특히 텍스트 대비(AA 기준), 포커스 링, 키보드 탭 순서를 명시하고 아이콘에는 접근성 라벨을 추가해 보조기기도 사용 가능한 인터페이스로 완성하는 것이 중요합니다. 컴포넌트 문서에는 예제 코드와 함께 사용 금지 사례를 추가해 파편화를 예방하세요.
이미지 사용도 체계화가 필요합니다. 히어로에는 고품질 주 시각(현재 저장소 기준으로는 1.jpg)을 사용하되, 본문 이미지는 캡션과 함께 의미 중심으로 배치합니다. 지연 로딩(lazy-loading)으로 초기 페인트를 가볍게 하고, 필요한 경우 WebP를 추가 제공하되 원본도 함께 유지합니다. 단, 목록 썸네일 전용 파일인 t.jpg/t.png는 본문에 노출하지 않도록 정책을 지키는 것이 좋습니다.
접근성·성능·SEO 체크리스트
접근성: 모든 이미지에 대체 텍스트를 제공하고, 헤딩 구조는 H1→H2→H3 계층을 유지합니다. 링크 텍스트는 맥락 없이도 목적이 이해되도록 작성하고, 폼에는 레이블·설명·에러 메시지를 연결합니다. 색상 대비는 텍스트 4.5:1(대문자/작은 텍스트 기준) 이상을 권장합니다. 성능: 폰트 서브셋, 이미지 지연 로딩, 중복 스크립트 제거, 크리티컬 CSS 인라인, 캐시 정책 최적화를 통해 LCP·INP·CLS를 개선합니다. SEO: 타이틀·메타 설명을 명확히 쓰고, OG/Twitter 카드 메타를 세팅하며, 구조화 데이터(조직·게시글)를 상황에 맞게 도입하면 공유성과 검색 노출을 동시에 끌어올릴 수 있습니다.
더블루캔버스 소개
더블루캔버스는 브랜드 전략과 디지털 제품 설계를 아우르는 팀입니다. 조사·진단에서 시작해 정보구조 수립, 디자인 시스템 정비, 프로토타입·개발 협업까지 전 과정을 실무적으로 지원합니다. 본 리뷰와 같은 체크리스트 기반 접근을 통해 빠르게 개선 우선순위를 합의하고, 성과 지표 중심으로 실질적인 변화를 만듭니다. 자세한 포트폴리오와 서비스 안내는 아래 링크에서 확인하실 수 있습니다.