디웰랩 스킨루트(SKINROUTE), 데스크톱 웹 화면 구성을 전면 개편

가로 1024px 이상 넓은 화면에서 좌측 레일·상단 바·⌘K 통합 검색과 다단 레이아웃 도입… 모바일 화면은 그대로

주식회사 디웰랩(DWELLLABINC)은 스킨루트(SKINROUTE) 웹 버전이 1024px 이상 넓은 화면에서 좌측 레일과 상단 바, 키보드 단축키 검색, 화면별 다단 레이아웃을 제공하도록 개편됐다고 밝혔다.

[서울=디웰랩] 주식회사 디웰랩(DWELLLABINC, 대표이사 김동현)은 초개인화 AI 피부건강관리 솔루션 스킨루트(SKINROUTE)의 데스크톱 웹 화면 구성을 개편했다고 밝혔다. 이번 개편은 노트북·데스크톱처럼 가로 1024px 이상 넓은 화면을 대상으로 한다. 좌측에는 전체 메뉴를 담은 레일이, 화면 위쪽에는 상단 바가 추가됐고, 키보드 단축키로 여는 통합 검색 팔레트도 새로 생겼다. 회사는 모바일에 맞춰져 있던 화면을 그대로 확대해 쓰던 방식에서 벗어나, 넓은 화면에 맞는 별도의 구성을 설계했다고 설명했다.

  • 1024px+ — 적용 화면 폭
  • ⌘K — 통합 검색
  • 3 — 코치 채팅 패널

왜 화면 크기를 구분했나

그동안 스킨루트는 화면 크기와 관계없이 하나의 레이아웃을 썼다. 모바일에서 잘 맞던 구성은 넓은 모니터에서는 여백이 남거나 메뉴 접근이 단조롭게 느껴질 수 있다. 회사는 이번 개편에서 1024px를 기준으로 화면을 나눠, 그보다 좁은 화면(모바일·태블릿 세로·앱)은 기존 구성을 그대로 유지하고 그 이상 넓은 웹 화면에만 새 레이아웃을 적용했다.

상단 바와 통합 검색은 웹 브라우저에서만 나타난다. 좌측 레일과 화면별 다단 구성은 화면 폭을 기준으로 적용되므로, 앱이라도 태블릿을 가로로 눕혀 화면이 충분히 넓어지면 함께 나타날 수 있다. 좁은 화면의 모바일 웹과 앱은 기존 구성을 그대로 유지한다.

좌측 레일과 상단 바

넓은 화면에서는 화면 왼쪽에 전체 메뉴를 담은 레일이 상시 노출된다. 레일은 접거나 펼칠 수 있어 콘텐츠를 더 넓게 보고 싶을 때 좁힐 수 있다. 화면 위쪽에는 상단 바가 추가돼 검색과 계정 관련 기능에 더 빠르게 접근할 수 있다.

마케팅 성격을 띠는 일부 페이지는 이 상단 바 대신 별도의 상단 내비게이션을 쓴다. 서비스 소개나 회사 소개처럼 이미 자체적인 헤더 구성을 갖춘 화면에서는 상단 바가 그 헤더와 겹치지 않도록 별도 구성을 적용했다고 회사는 설명했다.

키보드로 여는 통합 검색

웹 데스크톱 화면에서는 키보드의 Cmd+K(윈도우는 Ctrl+K)를 누르면 통합 검색 팔레트가 뜬다. 메뉴 이름을 입력해 원하는 화면으로 바로 이동할 수 있으며, 다른 팝업이 열려 있을 때는 뜨지 않도록 설계했다. 마우스로 레일을 일일이 훑지 않아도 자주 쓰는 메뉴에 빠르게 닿을 수 있도록 한 기능이라고 회사는 설명했다.

화면별로 달라지는 레이아웃

일부 화면은 넓은 공간을 살려 다단 구성으로 바뀐다. AI 코치와의 대화 화면은 더 넓은 화면(1280px 이상)에서 코치 목록·대화창·상담 내역이 한 화면에 나란히 배치되는 3패널 구성이 되고, 피부일기는 2단, 멤버십 안내는 3열로 펼쳐진다. 마케팅 성격의 페이지들도 데스크톱 전용 상단 내비게이션을 갖췄다.

좁은 화면의 모바일 웹과 앱 구성은 이번 개편으로 달라지지 않는다. 회사는 화면이 넓어진 만큼 한 번에 볼 수 있는 정보량을 늘리는 데 집중했으며, 예를 들어 코치 상담 화면에서는 지난 상담 내역을 별도 화면 전환 없이 옆에 띄워 두고 대화를 이어갈 수 있다고 설명했다.

  • AI 코치 채팅 — 3패널(1280px 이상)
  • 피부일기 — 2단
  • 멤버십 안내 — 3열
  • 마케팅 페이지 — 데스크톱 전용 상단 내비게이션

같은 계정, 화면만 다르게

회사는 이번 개편이 화면 배치의 변화일 뿐 서비스 내용 자체를 바꾸는 것은 아니라고 설명했다. 좁은 화면에서 쓰던 이용자가 넓은 화면으로 접속을 바꿔도 같은 계정, 같은 기록으로 이어서 이용할 수 있다. 회사는 앞으로도 화면 크기에 따라 구성을 달리하되 서비스의 내용과 계정 구조는 하나로 유지하는 방향을 이어갈 계획이라고 밝혔다.

회사는 이번 개편을 데스크톱 전용 별도 서비스가 아니라, 하나의 스킨루트가 화면 크기에 맞춰 스스로 모습을 바꾸는 것으로 봐 달라고 설명했다. 로그인 계정과 문진 결과, 코치와의 대화, 멤버십 정보는 화면 폭과 무관하게 서버에 저장되어 있으며, 이번 개편은 그 위에 놓이는 화면 배치만 조정한 것이라는 설명이다.

"넓은 화면에서도 스킨루트를 편하게 쓰실 수 있어야 한다고 생각했습니다. 작은 화면에 맞춘 레이아웃을 그대로 키우는 대신, 넓은 화면이 가진 공간을 제대로 쓰는 구성을 새로 설계했습니다."

— 김동현, 주식회사 디웰랩(DWELLLABINC) 대표이사

자주 묻는 질문

이번 개편은 모바일에서도 적용되나요?
아니다. 새 레이아웃은 1024px 이상 웹 브라우저 화면에만 적용되며, 모바일 웹 화면은 기존과 같다.
앱(앱인토스·안드로이드·iOS)에서도 좌측 레일이나 상단 바가 보이나요?
좌측 레일은 화면 폭 기준으로 앱 태블릿 가로 화면에서도 나타날 수 있지만, 상단 바는 웹 브라우저에서만 나타나며 앱에서는 뜨지 않는다.
통합 검색은 어떻게 여나요?
데스크톱 웹 화면에서 키보드로 Cmd+K(윈도우는 Ctrl+K)를 누르면 열린다.

주식회사 디웰랩 (DWELLLABINC) 소개

주식회사 디웰랩(DWELLLABINC)은 AI 피부 분석과 퍼스널 스킨케어 코칭을 제공하는 헬스·뷰티테크 기업이다. 주요 서비스로 스킨루트(SKINROUTE)를 운영한다.

면책

스킨루트(SKINROUTE)는 의료기기·의료기관이 아니며, AI 분석 결과와 코치의 답변은 일반적인 스킨케어 참고 정보다. 피부 상태가 걱정되면 피부과 전문의와 상담할 것을 권한다.