Zero Human Studio를 도구와 글이 함께 있는 사이트로 다시 만든 과정
Zero Human Studio는 처음부터 완성된 제품 사이트로 시작하지 않았다. 이름은 있었고, 만들고 싶은 방향도 있었지만, 사이트가 사용자에게 어떤 가치를 주는지 한 문장으로 설명하기는 어려웠다. 에이전시처럼 보일 수도 있고, 개인 실험실처럼 보일 수도 있고, 몇 개의 도구가...
Zero Human Studio는 처음부터 완성된 제품 사이트로 시작하지 않았다. 이름은 있었고, 만들고 싶은 방향도 있었지만, 사이트가 사용자에게 어떤 가치를 주는지 한 문장으로 설명하기는 어려웠다. 에이전시처럼 보일 수도 있고, 개인 실험실처럼 보일 수도 있고, 몇 개의 도구가 흩어진 페이지처럼 보일 수도 있었다.
이번 개편의 목표는 그 모호함을 줄이는 것이었다. Zero Human Studio를 “실용 도구와 글이 함께 있는 지식형 도구 허브”로 정리하고, 사용자가 바로 쓸 수 있는 기능과 그 기능을 설명하는 콘텐츠를 같은 사이트 안에 배치하려 했다. 이 글은 그 과정에서 어떤 기준으로 사이트 구조를 바꾸고, 어떤 점을 사용자 신뢰와 검색 접근성 관점에서 고려했는지 남기는 회고다.
도구만 있는 사이트의 한계
웹에는 수많은 무료 도구 사이트가 있다. 단위 변환, JSON 포맷터, QR 생성기, 이미지 압축, PDF 병합 같은 기능은 이미 익숙하다. 그래서 단순히 “우리도 도구가 있다”고 말하는 것만으로는 부족하다. 도구 페이지가 입력창과 결과 박스만 가진 얇은 페이지가 되면 사용자에게도, 검색엔진에게도 신뢰를 주기 어렵다.
반대로 글만 있는 사이트도 한계가 있다. 설명은 길지만 바로 해볼 수 있는 기능이 없으면 사용자는 다른 도구를 찾아 떠난다. 그래서 Zero Human Studio는 도구와 글을 분리하지 않고, 서로 연결하는 방향을 택했다. 도구는 바로 쓸 수 있어야 하고, 글은 그 도구가 필요한 상황과 주의점을 설명해야 한다.
사이트 구조를 다시 잡은 기준
개편 과정에서 가장 먼저 정한 것은 큰 정보 구조였다.
- 홈은 사이트의 정체성을 설명한다.
- 도구는 실제 기능 중심으로 묶는다.
- 글은 가이드, 실험 기록, 사이트 노트, IT 관련 메모까지 담을 수 있게 한다.
- 타자연습처럼 반복 사용성이 강한 기능은 별도 제품 레이어로 둔다.
- 개인정보 처리방침, 이용약관, 면책 고지는 하단에서 항상 접근 가능하게 한다.
이 구조는 단지 형식을 맞추기 위한 것이 아니다. 사이트가 공사 중처럼 보이지 않고, 메뉴가 비어 있지 않고, 운영자가 어떤 의도로 콘텐츠와 기능을 제공하는지 설명되어야 사용자가 안심하고 머무를 수 있기 때문이다.
도구 페이지에서 중요하게 본 것
도구 페이지는 기능이 먼저다. 사용자가 들어오자마자 계산하거나 변환하거나 검사할 수 있어야 한다. 하지만 기능만으로 끝내지는 않았다. 가능한 한 각 도구에 설명, 예시, FAQ, 관련 도구 링크를 붙여서 단순한 폼 페이지가 되지 않게 했다.
파일을 다루는 도구에서는 브라우저 로컬 처리를 강조했다. 이미지, PDF, QR 같은 기능은 사용자가 민감한 파일이나 값을 넣을 수 있기 때문에, 서버 업로드 여부를 명확히 말하는 것이 중요하다. 실제로 브라우저 안에서 처리되는 도구는 그 사실을 설명하고, 브라우저 메모리나 포맷 지원 한계도 같이 적어두는 편이 더 신뢰롭다.
계산기류 도구에서는 결과를 단정하지 않으려 했다. 환율, 급여, 세금, 대출, 퇴직금처럼 현실 조건이 많은 계산은 빠른 추정값을 제공할 수는 있지만, 법률·세무·금융 조언처럼 말하면 안 된다. 그래서 정책 페이지와 도구 설명에서 참고용이라는 선을 분명히 하는 방향을 잡았다.
글 콘텐츠를 넣은 이유
도구 사이트에 글을 넣는 이유는 단순히 페이지 수를 늘리기 위해서가 아니다. 사용자는 종종 계산기보다 먼저 맥락을 찾는다. 예를 들어 평수 변환기를 쓰기 전에 “59㎡가 몇 평인지”, 환율 계산기를 쓰기 전에 “카드 수수료를 어떻게 봐야 하는지”, Cron 도구를 쓰기 전에 “매일 아침 9시를 어떻게 표현하는지”를 검색한다.
그래서 글은 도구의 설명서이자 진입 경로다. 글에서 문제 상황을 설명하고, 도구로 연결하고, 다시 관련 글이나 도구로 이어지게 하면 사이트 전체가 더 자연스럽게 연결된다. 이 구조는 검색에도 유리하지만, 무엇보다 사용자가 한 번 더 머무를 이유를 만든다.
타자연습은 왜 별도 레이어가 되었나
타자연습은 일반 도구와 성격이 다르다. JSON 포맷터나 단위 변환기는 작업이 끝나면 닫는 도구다. 하지만 타자연습은 반복한다. 오늘의 기록, 다음 목표, 정확도, 도전단계처럼 사용자가 다시 돌아올 이유가 있다.
그래서 타자연습은 도구 목록 안의 작은 카드로만 두지 않고, 별도 경로와 모드를 가진 제품 레이어로 구성했다. 자리연습, 낱말연습, 단문연습, 장문/필사, 속도측정처럼 연습 목적에 따라 모드를 나누고, 한국어 입력의 특성을 고려한 타수 계산과 진행 흐름을 넣었다. 이 레이어는 앞으로 사이트의 반복 방문 장치가 될 수 있다.
신뢰를 위해 정리한 기준
공개 웹사이트는 기능만 있다고 충분하지 않다. 얇은 페이지, 미완성 메뉴, 복제된 설명, 정책 페이지 부재, 모바일 사용성 문제는 사용자가 금방 알아차리는 신뢰 저하 요소다. 이번 개편에서는 그런 위험을 줄이고, 사이트가 오래 운영될 수 있는 기본 구조를 먼저 잡는 쪽을 우선했다.
특히 다음 기준을 중요하게 봤다.
- 공개 페이지가 로그인 없이 접근 가능해야 한다.
- sitemap과 robots가 정상이어야 한다.
- 개인정보 처리방침, 이용약관, 면책 고지가 있어야 한다.
- 도구 페이지는 실제 기능과 설명을 함께 가져야 한다.
- 글은 짧은 홍보 문구가 아니라 독립적으로 읽을 수 있어야 한다.
- 가짜 통계, 가짜 후기, 가짜 랭킹은 넣지 않는다.
- 사용자가 누르는 핵심 버튼과 입력 영역 주변은 산만하지 않게 유지한다.
이 기준은 외부 평가를 의식한 체크리스트라기보다, 장기적으로 사이트 신뢰를 지키기 위한 운영 기준에 가깝다.
구현하면서 남은 기술적 과제
사이트는 Next.js App Router 기반으로 구성되어 있다. 정적 페이지와 동적 도구 페이지, Markdown 기반 글 로딩, 클라이언트 도구 컴포넌트가 함께 있다. 이 구조는 빠르고 단순하지만, 운영하면서 주의해야 할 점도 있다.
글을 추가하면 빌드와 배포가 필요하다. 도구 페이지를 늘릴 때는 registry, sitemap, 관련 링크, SEO 메타데이터가 함께 맞아야 한다. 클라이언트에서만 동작하는 도구는 검색엔진이 보는 HTML에서도 최소한의 설명과 구조가 보여야 한다. 또한 브라우저 로컬 파일 도구는 모바일 메모리와 포맷 지원 한계를 계속 검증해야 한다.
프로덕션 QA에서는 canonical 도메인도 확인해야 했다. 실제 도메인은 하이픈이 들어간 oh-my-zhs.com인데, 일부 메타데이터와 sitemap 기본값이 하이픈 없는 도메인을 가리키면 검색 신호와 공유 링크가 분산될 수 있다. 이런 작은 불일치는 공개 전에 미리 잡는 편이 좋다.
앞으로 더 채워야 할 것
아직 사이트가 끝난 것은 아니다. 오히려 이제부터 운영 단계에 가까워졌다.
다음으로 채우고 싶은 부분은 다음과 같다.
- 타자연습 제작기, 구현 노트, 개선 계획 같은 회고형 글 추가
- 각 대표 도구별 사용 맥락을 설명하는 가이드 확장
- 도구 페이지의 실제 사용 예시와 FAQ 보강
- 모바일 QA와 접근성 점검 반복
- Search Console 색인 상태 확인
- 사용자의 핵심 행동을 방해하는 UI 요소가 없는지 점검
- 빈약한 legacy 페이지가 남아 있으면 정리
특히 회고형 글은 이 사이트에 잘 맞는다. 단순한 정보성 글보다, 왜 만들었고 무엇을 고민했는지 보여주는 글은 운영자의 관점을 드러낸다. 도구 사이트가 익명 복제 사이트처럼 보이지 않게 하는 데에도 도움이 된다.
마무리
Zero Human Studio의 이번 개편은 도구를 많이 늘리는 작업이라기보다, 사이트의 이유를 정리하는 작업에 가까웠다. 사용자가 바로 쓸 수 있는 기능, 그 기능을 설명하는 글, 그리고 운영자의 판단이 보이는 회고를 함께 쌓는 것이 목표다.
얇은 페이지를 늘리는 대신 실제 기능과 설명, 정책, 운영 기록을 함께 쌓는 사이트가 되어야 한다. 아직 해야 할 일은 남아 있지만, 이제 Zero Human Studio는 단순한 랜딩 페이지가 아니라 도구와 글이 함께 자라는 사이트의 형태를 갖추기 시작했다.
Related posts
Read →Related tools