상호작용 기반 사운드 피드백으로 생동감 추가
| 입력값 변경 | |
| 로그아웃 |
데스크톱에서 모바일 화면 미리보기 - 모바일 프리뷰
이 서비스는 모바일과 데스크톱이 서로 독립적인 레이아웃을 가진다. 데스크톱에서 아이템의 배치가 모바일에서 동일하게 적용되지 않는다. 그렇기 때문에 두 기기에서 개별적으로 아이템들을 배치해야 한다. 그래서 설계한 것이 바로 모바일 프리뷰이다.
모바일 프리뷰는 데스크톱 브라우저에서 작업하는 동안 내 페이지가 모바일 화면에서 어떻게 보이는지 즉시 확인하기 위한 기능이다. 기존에는 브라우저 창의 너비를 직접 줄이거나 개발자 도구의 반응형 모드를 열어야 했기 때문에, 편집 화면과 모바일 결과를 번갈아 확인하는 과정이 번거로웠다. 정말로…
특히 브라우저 크기를 반복해서 조절하면 작업 흐름이 끊기고, 커서와 버튼을 조작할 수 있는 공간도 함께 줄어드는 불편함이 있었다.
이 기능을 통해 툴바의 버튼 한 번으로 Wide와 Compact 레이아웃을 전환할 수 있다. 사용자는 데스크톱 크기의 브라우저와 편한 커서 조작 환경을 그대로 유지하면서, 페이지 콘텐츠와 프로필 영역이 모바일 기준으로 재배치되는 모습을 확인할 수 있다. 따라서 브라우저 자체를 계속 리사이즈하지 않아도 되고, 편집과 결과 확인을 하나의 화면 안에서 빠르게 반복할 수 있다.
프리뷰 전환에는 프레임 크기와 콘텐츠 레이아웃이 갑자기 바뀌지 않도록 전환 효과를 적용했다. 모바일 프레임이 자연스럽게 나타나고 내부 콘텐츠도 부드럽게 전환되기 때문에, 사용자는 단순히 화면이 교체되는 느낌보다 같은 페이지가 다른 화면 크기에 맞춰 적응하는 과정을 이해하기 쉽고, 기능적인 변화 자체를 더 명확하게 전달하고, 레이아웃이 크게 바뀔 때 발생하는 시각적 혼란을 줄여준다고 생각한다.
모바일 프리뷰 프레임에서 세로로 강하게 스크롤하면 기본 브라우저의 overscroll 동작 때문에 프레임 바깥의 배경색이 노출되는 문제가 있었다. 이 현상은 실제 모바일 페이지를 보는 중이라기보다 프레임이 튕기는 것처럼 보이게 만들고, 둥근 모서리와 그림자로 구성한 프리뷰의 완성도를 떨어뜨렸다. 그래서 Compact 상태의 바깥 스크롤 영역과 프리뷰 프레임에 overscroll-y-none을 적용해 과도한 스크롤 튕김을 막았다.
이 설정으로 프레임 내부에서 콘텐츠를 스크롤하더라도 바깥 배경이 불필요하게 드러나지 않고, 프레임의 경계와 배경, 그림자 관계가 안정적으로 유지된다.
모바일 프리뷰는 단순히 너비만 줄인 임시 화면이 아니라 실제 모바일 화면을 담은 하나의 독립된 캔버스처럼 보이며, 사용자는 레이아웃뿐 아니라 페이지가 제공하는 화면 경험까지 더 정확하게 판단할 수 있다.
미디어 아이템 스타일 디테일 개선
초기 미디어 아이템은 입체적인 느낌이 없었다. 이는 단순한 border, ring으로도 해결이 안됐으며 shadow로도 뭔가 아쉬웠다. 입체적인 느낌의 스타일 명칭을 몰라서 유사 서비스에 가입하고 직접 사용해 보면서 원하는 효과가 있는지 찾았다. 개발자 도구에서 요소를 하나 하나 분석해서 어떤 CSS인지 찾아서 뽑아냈다)
그렇게 적용한 스타일은 surface-line 이라고 명명했다. 차이를 살펴보자:
*해당 효과만 적용했을 뿐인데 이미지가 3D 처럼 입체적으로 보인다. *반면, 적용하지 않은 상태는 바닥에 달라붙은 것 처럼 보인다. (확대해서 보면 더욱 체감할 수 있다.)
Input과 Textarea의 가독성을 위한 행간(leading) 조정
링크 아이템은 다양한 preset(=크기)을 가질 수 있다. 이때, Input과 Textarea는 preset 별로 너비와 높이가 모두 다르다. 그렇기 때문에 값이 잘리지 않고 표현되도록 하는게 중요하다.
이를 위해서, 각 preset 별로 모든 leading을 비교하여 최적의 값을 찾아내서 적용했다. 물론, 이 정도까지 해야 하나 싶다가도 당연히 해야 한다고 생각이 들었다. 그리고 내부 스크롤 처리로 잘린 값도 보여주도록 하면 되지만, '스크롤을 하기 전'에 보여지는 건 어떻게 할 것인가? → 반드시 최적의 leading이 필요할 수 밖에 없다로 귀결된다.
전/후 사진을 보면 명확하게 차이가 드러난다. '적용 후'가 확실히 텍스트가 밀집되어 있지 않아서 답답함이 줄어들고 잘리는 텍스트도 없다.
| 아이템 Preset | |
|---|---|
| half-banner | |
| square-small | |
| landscape | |
| portrait | |
| square-large |
Popover 메뉴 간 끊김 없는 Hover 전환
Popover 메뉴의 각 항목에 개별적으로 hover 배경을 적용하면, 포인터가 한 메뉴 아이템에서 다른 아이템으로 이동할 때 기존 배경이 사라지고 새로운 배경이 다시 나타나는 과정이 반복된다. 이는 메뉴 아이템 사이를 이동할 때마다 효과가 끊기는 느낌을 준다.
즉, 메뉴 전체가 하나의 인터랙티브한 영역이라기보다 각각 따로 반응하는 요소처럼 느껴질 수 있다.
이를 개선하기 위해 메뉴 전체에 Shared Layout Background 효과를 적용했다. 각 메뉴 아이템이 별도의 배경을 생성하는 대신 하나의 공유된 배경 요소가 현재 hover 위치를 따라 이동하도록 구성했기 때문에, 아이템 간 이동 시 배경이 사라졌다가 다시 나타나는 것이 아니라 이전 항목에서 다음 항목으로 자연스럽게 이어진다. 배경의 위치와 크기가 아이템의 영역에 맞춰 부드럽게 변하면서 포인터의 이동 경로를 시각적으로 연결해준다. Good!
사용자는 메뉴 안에서 이동하고 있다고 느끼기 때문에, 메뉴가 하나의 연속된 인터페이스처럼 받아들여진다. 결과적으로 작은 hover 동작만으로도 메뉴의 완성도와 반응성이 높아진다고 할 수 있겠다.
*생동감도 추가
링크 위젯 생성 과정에서 디테일 한 스푼
링크 위젯은 사용자가 URL을 입력한 뒤 제출 버튼을 눌러 생성할 수 있다. 하지만 실제 사용 흐름을 떠올려보면, 사용자가 항상 직접 주소를 입력하진 않는다. 특히 긴 URL이라면 입력보다 복사해 붙여넣는 방식이 훨씬 자연스럽다. 그래서 복사 붙여넣기 동작도 지원하도록 개선했다.
여기서 한 걸음 더 나아가, 이미 완성된 URL을 붙여넣은 뒤에도 다시 제출 버튼을 누르게 하는 것이 과연 적절한지 고민했다. 수동 입력은 아직 완성되지 않은 URL일 수 있고, 시스템이 그것을 즉시 완성된 주소로 단정하기도 어렵기 때문에 자동 제출의 대상이 되기 어렵다. 반면 붙여넣기는 대체로 완성된 URL이 한 번에 들어오는 동작이기 때문에, 붙여넣기 순간을 감지해 자동으로 생성이 트리거되도록 처리했다.
URL 입력 방식도 함께 다듬었다. 처음에는 프로토콜까지 포함해 입력하도록 설계했지만, 실제로는 대부분 https:// 없이 도메인부터 입력하는 경우가 더 많다. (필자도 그렇다.) 그래서 프로토콜 입력은 제거하여 더 자연스러운 입력 경험을 맞추었다.
대신 서버에서는 전달받은 URL 앞에 https://를 자동으로 붙인 뒤 fetch 하도록 구성했다.
단, 이 방식은 http://를 지원하지 않기 때문에 https://를 사용하지 않는 서비스에는 제약이 있을 수 있다. 다만 오늘날 대부분의 서비스가 기본적으로 HTTPS를 사용한다는 점을 고려해, 현재는 이 방향으로 구현했다.