마롱컴퍼니는 디지털 경험을 중심으로 한 브랜딩과 콘텐츠 제작을 수행하는 기업으로, 웹사이트는 브랜드 아이덴티티를 직관적으로 전달하면서도 전환을 유도하는 정보설계가 요구됩니다. 본 리뷰는 퍼스트 뷰 메시지 명료성, 내비게이션 구조, 콘텐츠 계층화, 주요 CTA(문의, 포트폴리오 열람, 서비스 소개) 가시성, 그리고 성능·접근성의 균형을 중점적으로 다룹니다. 특히 모바일 우선 경험과 레티나 이미지를 고려한 비주얼 전략, 그리고 핵심 랜딩의 스캐닝 가능성(헤드라인·보조설명·컬러 대비·공백 활용)을 면밀히 검토하여, 사용자가 ‘무엇을 얻는지’를 빠르게 이해하도록 돕는 데 초점을 맞춥니다.
리뷰의 범위에는 홈, 서비스/작업물 목록과 상세, 회사 소개/채용, 문의 흐름까지 포함됩니다. 또한 GA 이벤트 관점에서의 상호작용 설계(스크롤 깊이, 주요 버튼 클릭, 연락 유도 구성요소에 대한 전환 측정)까지 고려하여 실무 적용성을 강화합니다. 본 문서는 단순 미감 평가가 아니라, 정보구조와 카피 전략, 시각적 계층화, 컴포넌트 일관성, SEO 및 접근성 정책을 하나의 관점으로 결합해 평가한다는 점에서 의미가 있습니다.
핵심 메시지 강조: 브랜드 가치 제안이 한눈에 보이도록 헤드라인-서브카피-CTA의 3요소를 퍼스트 뷰에서 충분한 대비와 여백으로 구성하는 것을 권장합니다.
UX/UI 구조와 인터랙션
내비게이션은 5±2 항목 원칙을 지키되, 서비스/작업물 영역은 드롭다운 또는 메가 메뉴로 세부 카테고리를 명확히 분리하는 것이 탐색 효율에 유리합니다. 버튼과 링크의 역할을 시각적으로 구분하고, 기본/보조/텍스트 버튼의 상태(hover/active/disabled)를 일관되게 제공하면 사용성 혼란을 줄일 수 있습니다. 카드형 목록은 썸네일 대비와 정보 밀도를 조절해 스캐닝을 빠르게 하고, 태그/메타 정보는 1~2줄 내로 제한하여 가독성을 높입니다. 스크롤 유도 애니메이션은 가볍게 적용하되, 콘텐츠 가독성과 성능에 영향이 없도록 지연 로딩과 교차 관찰자를 병행합니다.
상세 화면에서는 헤드라인-핵심 요약-미디어-본문 순으로 정보가 계층화되어야 하며, 긴 문단은 소제목과 리스트를 활용해 분절합니다. 폼은 입력 도움말과 에러 메시지를 인라인으로 제공하고, 유효성 검사를 단계별로 수행해 이탈을 최소화합니다. 또한 키보드 탐색과 포커스 이동, 스킵 링크 등 접근성 항목을 기본 제공해야 합니다. 마지막으로, CTA는 화면 하단 플로팅 또는 본문 내 구역 단위로 반복 배치해 상호작용 기회를 충분히 제공합니다.
SEO/성능 최적화 제언
메타 타이틀과 디스크립션은 페이지 목적에 맞춰 고유하게 작성하고, H1은 페이지당 1회만 사용합니다. 이미지에는 대체 텍스트(alt)를 서술형으로 제공하고, 목록/상세에서 핵심 키워드를 자연스럽게 포함해 검색 의도에 부합하도록 합니다. URL은 소문자-하이픈 규칙으로 정규화하고, 동일/유사 콘텐츠는 정규화 링크(rel=canonical)로 중복 신호를 줄입니다. 또한 OG/Twitter 카드 태그를 구성해 소셜 미리보기 품질을 확보하면 CTR 향상에 도움이 됩니다. 구조화 데이터의 적용(브레드크럼, 조직 정보 등)도 고려할 수 있습니다.
성능 측면에서는 이미지의 지연 로딩(lazy)과 WebP/AVIF 변환을 병행하되, 원본도 보관하여 호환성을 지킵니다. 폰트는 시스템 폰트 우선, 웹 폰트는 서브셋/디스플레이 스왑 전략으로 플래시(FOUT)를 최소화합니다. CSS/JS는 번들 및 미니파이를 적용하고, 상호작용 필수 코드만 초기 로드에 포함합니다. LCP 요소는 퍼스트 뷰 내에서 안정적인 레이아웃을 유지하도록 크기 속성을 명시하고, CLS를 유발하는 지연 삽입 요소는 예약 영역을 확보합니다.
비주얼 전략과 콘텐츠
대표 이미지(1.jpg)는 고해상도 소스를 사용하되, 가로/세로 비율을 고정해 레이아웃 안정성을 확보합니다. 작품 목록은 썸네일 일관성을 위해 동일 비율 크롭을 권장하며, 배경색과의 대비를 고려해 테두리 또는 그림자를 적절히 사용합니다. 캡션에는 맥락(카테고리, 역할, 사용 기술)을 간결히 제공해 검색과 공유 상황에서 의미가 전달되도록 합니다. 영상이 있다면 썸네일에 명확한 플레이 시각을 제공하고, 자동 재생은 지양합니다. 이미지는 모두 의미 있는 대체 텍스트를 포함하며, 불필요한 장식 이미지는 CSS로 대체합니다.
마롱컴퍼니 대표 비주얼. 고해상도와 대비/여백을 통해 메시지를 또렷하게 전달합니다.
더블루캔버스 소개 및 연계
더블루캔버스는 데이터 기반의 UX 리서치와 브랜딩, 프로덕트 디자인을 통합하여 조직의 디지털 전환을 가속화하는 디자인 파트너입니다. 서비스 기획부터 디자인 시스템 구축, 마케팅 퍼널 최적화까지 전 과정을 이어주는 실행형 컨설팅을 제공하며, 본 리뷰에서 제안한 개선안도 실제 프로젝트에 바로 적용할 수 있도록 정제되어 있습니다. 더블루캔버스와의 협업을 통해 마롱컴퍼니의 핵심 가치 제안이 더욱 분명해지고, 서비스 페이지와 포트폴리오의 전환율을 실질적으로 향상시키는 설계를 구현할 수 있습니다.
요약하면, 퍼스트 뷰의 가치 제안 명료화, 내비게이션/카드형 목록의 스캐닝 최적화, CTA의 반복 배치, 접근성 기본 항목 준수, 메타/OG 최적화, 이미지 지연 로딩과 폰트 전략 등은 단기간에 체감 성과를 만들 수 있는 개선 축입니다. 우선순위를 정해 점진적으로 도입하되, 지표 기반으로 가설을 점검하고 학습을 누적해 나가길 권장합니다.
