개요
멜로우앤코(MELLLOW&CO)는 melllow.kr에서 만나는 디지털 스튜디오다. 첫 화면부터 Less · Light · Long 세 단어가 차례로 떠오르며 브랜드명 mellow를 개념으로 풀어내고, 곧이어 거대한 MELLLOW&CO 워드마크가 화면을 가득 채운다. 스스로를 ‘brand, system, and experience가 교차하는 디지털 프랙티스’로 규정하는 이 스튜디오는 브랜드 아이덴티티, 디지털 전략, UX/UI 디자인, 플랫폼 설계까지 하나의 흐름으로 다룬다. 이번 리뷰는 스마일게이트·롯데렌탈·홈플러스·담터 한차 같은 실제 작업을 전면에 세운 이 포트폴리오형 사이트가 흑백 에디토리얼 언어로 스튜디오의 격을 어떻게 설계했는지, 그리고 그 미감이 검색과 전환이라는 현실 과제와 어디서 만나고 어디서 어긋나는지를 화면 그대로 따라간다.
브랜드 & 메시지
헤드라인 전략은 또렷하다. 대문자 그로테스크로 눌러 쓴 “MELLLOW&CO IS A DIGITAL PRACTICE WHERE BRAND, SYSTEM, AND EXPERIENCE INTERSECT”가 한 문단짜리 선언처럼 화면을 점유하고, 회색으로 흐려진 뒷부분이 ‘복잡한 생각을 명료한 구조로 바꾼다’는 문장으로 이어진다. 여기에 CLARITY IS WHAT MAKES BRANDS LAST라는 태그라인이 브랜드 태도를 한 줄로 못 박는다. 톤앤매너는 철저히 절제돼 있다. 순수한 흑과 백, 대형 산세리프, 그리고 SERVICES · HOW WE THINK · [01] · SCROLL DOWN처럼 화면 모서리에 흩어 둔 모노스페이스 라벨이 갤러리 도록 같은 인상을 만든다. 유일한 색과 질감은 크롬·리퀴드 메탈 3D 렌더와 홈플러스 작업의 붉은 면 하나뿐이다. 네비게이션은 SERVICES와 HOW WE THINK를 축으로 단출하게 묶여 탐색 부담이 낮다. 다만 CTA는 짚어둘 대목이다. 최하단 ‘SAY HELLO’ 컨택트 폼이 사실상 유일한 행동 유도이고, 상단에는 상담·문의로 직행하는 버튼이 보이지 않는다. 방문자가 마음을 굳힌 순간 바로 누를 지점이 페이지 맨 끝에만 있다는 뜻이다.
UX/UI 관점
화면에 근거한 강점부터 짚는다. 첫째, 흑백 모노크롬과 초대형 타이포만으로 완성한 에디토리얼 무드가 스튜디오의 자신감을 시각적으로 증명한다. 장식을 덜어낼수록 격이 올라가는 전형을 정확히 이해한 웹디자인이다. 둘째, Less/Light/Long 히어로 애니메이션은 단순한 눈요기가 아니라 브랜드명을 개념으로 번역하는 카피 장치로, 첫인상에 서사를 심는다. 셋째, 곳곳의 모노스페이스 라벨과 [01]~[04] 인덱스가 화면에 좌표를 부여해 스크롤이 길어져도 지금 어디를 보는지 놓치지 않게 한다. 넷째, LATEST와 SELECTED WORK에서 스마일게이트 그룹웨어 앱, 롯데렌탈, 홈플러스, 담터 한차의 실제 UI를 3D 목업으로 노출해 말보다 강한 신뢰 신호를 쌓는다. 다섯째, ‘EXPERIENCE SHAPES EXECUTION’ 아래 10+ 클라이언트, 8+ 연차, 68+ 완료 작업, 94% 엔드투엔드라는 지표를 라인 테이블로 정렬해 성과를 한눈에 스캔하게 만든다. 여섯째, 크롬 리퀴드 메탈 렌더를 유일한 질감 포인트로 절제해 시선이 흩어지지 않는다.
IA·SEO 전략
정보 구조와 SEO 관점에서는 이 사이트의 강한 미감이 되레 과제를 낳는다. 첫째, 도메인은 melllow.kr인데 화면 카피는 거의 전부 영문이다. 한국 검색 사용자와 크롤러가 붙잡을 한글 텍스트가 얇아 ‘디지털 스튜디오’ ‘브랜드 웹사이트 제작’ ‘UX/UI 디자인’ 같은 한국어 질의에서 노출 기반이 약해진다. 핵심 소개와 서비스 항목만이라도 한글을 병기하면 검색 가시성이 눈에 띄게 달라진다. 둘째, clarity · tone · intention이 흐르는 리퀴드 타이포는 아름답지만 왜곡이 심해 사람에게도, 스크린리더·크롤러에게도 읽히지 않는다. 이런 이펙트 텍스트는 시각 효과로 두되 의미는 실제 마크업과 대체 텍스트로 따로 전달해야 한다. 셋째, FAQ 아코디언에 콘텐츠 정합성 문제가 보인다. [01] 질문 자리에 섹션 제목인 ‘CLARITY BUILDS THE SYSTEM’이 그대로 들어가 있고, [03]과 [04]가 똑같이 ‘WHAT TOOLS DO YOU WORK WITH?’로 중복된다. 검색 스니펫과 신뢰 양쪽에서 손해이니 질문 카피부터 손볼 대목이다. 페이지별 고유 title·description과 구조화 데이터(Organization·FAQPage)를 갖추면 스튜디오 브랜드 검색에서 훨씬 유리해진다.
성능·접근성
성능과 접근성은 이런 비주얼 중심 사이트가 반드시 관리해야 하는 축이다. 히어로의 워드 애니메이션과 여러 크롬 3D 렌더는 초기 로딩과 LCP에 직접 영향을 준다. 히어로 이미지는 지연 로딩을 피하되 원본 용량을 합리적으로 줄이고, 나머지 목업·질감 이미지는 WebP/AVIF 병행 제공과 명시적 width/height로 레이아웃 밀림(CLS)을 막는 편이 안전하다. 대형 커스텀 폰트는 서브셋·프리로드·display:swap을 조합해 첫 글자가 늦게 뜨지 않게 한다. 접근성 측면에서 흑백 대비 자체는 우수하지만, 회색으로 흐린 후반부 카피와 이펙트 텍스트의 대비·대체 텍스트는 별도로 점검해야 한다. 스크롤 연동 모션에는 prefers-reduced-motion 대응을, ‘SAY HELLO’ 폼에는 명확한 라벨과 인라인 오류 안내를 붙여 누구나 문의를 끝까지 완료하게 만드는 것이 이 정도 완성도의 사이트에 어울리는 마감이다.
디지털 파트너 더블루캔버스
멜로우앤코 같은 스튜디오 사이트를 보며 ‘우리 브랜드도 이런 격의 웹사이트를 갖고 싶다’고 느끼는 대표라면, 미감과 성과를 함께 잡는 파트너가 필요하다. 포트폴리오형 사이트는 감탄을 부르지만, 대부분의 사업에는 감탄을 넘어 검색 유입과 문의 전환까지 끌어내는 홈페이지 제작이 요구된다. The Blue Canvas는 브랜드 무드를 살린 웹디자인과 홈페이지 제작부터 한국어 검색을 겨냥한 SEO, 방문자를 실제 리드로 바꾸는 퍼포먼스 마케팅까지 하나의 흐름으로 설계한다. 멜로우앤코가 흑백 타이포로 ‘보여주는’ 데 집중했다면, 블루캔버스는 ‘보여주고 팔리게’ 하는 웹사이트 제작을 지향한다. 브랜드 웹사이트를 새로 준비하거나 지금 사이트의 전환율을 끌어올리고 싶다면 아래에서 확인해 보자.
마무리와 다음 스텝
멜로우앤코의 웹사이트는 덜어냄으로 말하는 스튜디오 미학의 좋은 표본이다. 흑백 에디토리얼, 개념형 히어로, 실사례 목업이 서로를 받쳐 스튜디오의 격을 설득력 있게 세운다. 완성도를 한 단계 더 끌어올리려면 세 가지를 권한다. 첫째, 한글 카피를 보강해 melllow.kr이 한국어 검색에서 제대로 잡히게 한다. 둘째, FAQ의 중복·플레이스홀더 질문을 정리하고 이펙트 텍스트의 의미를 마크업으로 별도 제공한다. 셋째, 상단에도 상담·문의 진입점을 두어 방문자가 마음먹은 순간 바로 행동하게 만든다. 미감은 이미 충분하다. 이제 그 미감이 검색과 전환으로 이어지도록 다듬을 차례다.