말로 설명하는 대신
직접 만들었습니다.업종과 스타일별로 직접 만든 홈페이지, 앱, 커머스, 관리자 화면 3종입니다.

장기렌트 사이트들이 데스크톱에서 쓰는 화면 구성을 충실히 구현한 시안입니다. 배너 캐러셀은 가운데 한 장을 크게 두고 양옆이 살짝 걸쳐 보이게 했고, 인디케이터는 점 대신 ‘‹ 2 / 3 ›’ 같은 번호로 표시합니다. 그 아래에는 아이콘 퀵메뉴 8종이 있고, ‘단독 특가’에는 자정까지 줄어드는 카운트다운이 붙습니다. 헤더에서 차량을 검색하면 아래 차량 캐러셀의 목록이 실제로 걸러집니다. 오토클래스와 카페이의 데스크톱 화면을 살펴보니 모바일에는 없는 장치가 세 가지 있었습니다. 왼쪽에는 미니 상담 폼이 스크롤을 따라 내려오고, 오른쪽에는 견적 패널이 스크롤 내내 고정되며, 그 아래로 재구매율, 만족도, 누적 출고 대수가 계속 보입니다. 가운데에는 자동으로 넘어가다가 커서를 올리면 멈추는 차량 캐러셀을 두었고, 차량 카드는 이 업종에서 흔히 쓰는 방식대로 취소선을 그은 정가 옆에 빨간색 할인가를 보여 줍니다. 배너 문구는 이미지에 넣지 않고 HTML 글자로 올려서, 특가 문구를 바꿀 때 디자이너가 필요하지 않습니다. 색은 참고한 사이트들의 노란색을 쓰되 그 모티프를 도로의 중앙선으로 잡았습니다. 그래서 구분선은 모두 노란 파선이고, 숫자는 주행거리계처럼 보이게 만들었습니다.

남이 만든 사이트를 넘겨받아 고치면 어떻게 달라지는지 보여 주는 화면입니다. 손잡이를 밀면 첫 화면, 휴대폰 화면, 비급여 안내, 기계가 읽는 문서 네 부분의 인수 전과 후가 바뀝니다. ‘후’ 화면도 설명용 뼈대에 그치지 않고 대기실과 접수 사진까지 넣어 실제 사이트처럼 조판했습니다. 실사 기능이 실제로 작동합니다. 버튼을 누르면 이 브라우저가 위의 두 화면을 그 자리에서 측정합니다. 본문 글자 수, 가장 작은 글자 크기, 고정폭 상자, 누를 수 있는 요소, 글자로 된 가격, 본문에 남은 마지막 날짜를 재는데, 값을 미리 적어 두지 않고 DOM을 직접 훑어 재기 때문에 화면을 고치고 다시 누르면 숫자도 따라 바뀝니다. 잴 수 없는 항목은 잴 수 없다고 적었습니다. h1, 구조화 데이터, 뷰포트, https는 두 화면이 한 문서를 나눠 쓰는 구조라 따로 잴 수 없어서, 해당 항목에는 120곳 실측 숫자만 함께 적었습니다. 잰 값은 아래 인수 확인서의 ‘인수 시점 기록’으로 넘어갑니다. 왼쪽의 인수 전 화면도 지어내지 않았습니다. 병원과 의원 120곳을 열어 재 본 분포를 바탕으로 만들었고, 항목마다 몇 곳이 그랬는지 옆에 적었습니다(열리는 41곳 중 h1 없음 27곳, 구조화 데이터 없음 30곳). 양쪽 모두 실제 HTML이라 같은 브라우저가 같은 조건에서 그립니다.

랜딩 페이지 한 장에 그치지 않고 실제로 돌아가는 시스템을 보여 줍니다. 상단 탭으로 환자가 보는 홈페이지, 환자가 날짜와 시간을 골라 넣는 예약 화면, 데스크에서 그 예약을 확인하고 완료 처리하는 관리자 화면을 오갈 수 있고, 예약 화면에서 넣은 예약이 관리자 화면에 바로 나타납니다. 네이버에서 확인해 보니 환자들은 ‘슈링크’, ‘리쥬란’처럼 시술 이름으로 검색해서 홈페이지도 시술 이름에서 시작하게 했습니다. 시술 옆에는 회복 기간과 주의사항을 가격과 같은 크기로 적었습니다. 의료법 제56조가 금지하는 전후 사진, 체험담, 비교, 과장 표현은 쓰지 않았습니다.