agency-web 리포지토리 분석: 로컬 퍼스트 도구 허브와 타자연습 제품의 방향성

요약

agency-web 리포지토리는 단순한 에이전시 소개 사이트라기보다, Zero Human Studio / oh-my-zhs 브랜드 아래에서 운영되는 실용 도구 허브, 글 기반 가이드 허브, 그리고 한글·영문 타자연습 제품을 결합한 로컬 퍼스트 웹 애플리케이션에 가깝다. 현재 구조상 핵심 방향은 “많은 얇은 페이지”를 무작정 늘리는 것이 아니라, 실제 사용 가능한 도구를 만들고, 각 도구를 설명하는 상세 가이드와 내부 링크 구조를 붙여 검색 유입, 신뢰, 반복 사용성을 동시에 확보하는 쪽이다.

가장 중요한 특징은 세 가지다. 첫째, /tools는 27개 도구를 카테고리별로 묶은 기능형 카탈로그이며, 브라우저 로컬 처리와 개인정보 메시지를 적극적으로 내세운다. 둘째, /posts는 단순 블로그가 아니라 툴 상세가이드, 개발 회고, 실험 기록을 검색·필터·정렬할 수 있는 콘텐츠 발견 허브로 재구성되어 있다. 셋째, /typing은 일반 페이지 수준을 넘어, 한글 IME, 키별 약점 분석, 점수·세션·스트릭 저장, Phaser 기반 Word Defense 게임까지 포함하는 별도 제품군으로 발전하고 있다.

기술 스택과 아키텍처

프로젝트는 Next.js 16, React 19, TypeScript, Tailwind CSS 4 기반이다. 설정은 standalone 출력, React strict mode, WebAssembly 활성화를 포함하고 있어 배포와 클라이언트 고급 기능을 모두 고려한다. 배포 설정에는 보안 헤더와 한국 리전 배치가 포함되어 있어, 한국 사용자를 우선 고려한 운영 방향도 드러난다.

다만 프로젝트 설명 문서는 아직 실제 제품 성격을 충분히 설명하지 못한다. 코드와 계획 문서는 이미 상당히 구체적인 제품·콘텐츠 전략을 담고 있으므로, README와 About 문서는 실제 정체성에 맞게 갱신할 필요가 있다.

도구 허브: 실용 유틸리티 라이브러리

도구 카탈로그에는 총 27개 도구가 정의되어 있다. 이 도구들은 한국 생활, 시간·금액 계산, 파일·미디어 처리, 개발자 자동화, 네트워크 진단, 마이크로 유틸리티로 나뉜다.

도구 상세 페이지는 기능 위젯만 보여주는 구조가 아니다. 각 페이지는 설명, 예시, FAQ, 입력·출력 스펙, 관련 도구, 관련 상세 가이드를 함께 배치한다. 특히 파일·미디어, 개발자 도구, 마이크로 유틸리티 계열에서는 로컬 처리와 프라이버시 메시지가 강조된다. 이는 “무료 계산기 모음”이 아니라 신뢰 가능한 작업 도구 라이브러리로 포지셔닝하려는 의도다.

콘텐츠 허브: 블로그보다 툴 가이드 아카이브

/posts는 단순 최신글 목록이 아니라, 검색어, 글 유형, 카테고리, 관련 도구, 정렬 기준을 조합해 글을 찾는 구조다. 글 유형은 툴 상세가이드, 회고, 실험, 뉴스·노트, 일상성 글로 표시되며, 도구와 연결된 guide는 “툴 상세가이드”로 분류된다.

계획 문서에서도 방향은 명확하다. 별도의 최상위 Guides 메뉴를 줄이고, 도구 사용법 글을 Posts 안의 Tool Guides로 노출하며, 각 도구 페이지에서 관련 가이드로 다시 연결하는 구조다. 이는 검색 유입과 사용성 개선을 동시에 의식한 실용 콘텐츠 강화 전략으로 볼 수 있다.

현재 게시글은 published와 draft가 섞여 있으며, 공개 글 중 상당수는 평수, 환율, KST, Cron, JSON/YAML, 브라우저 로컬 처리처럼 도구 사용 의도와 직접 연결된다. 반면 넓은 트렌드 글은 우선순위가 낮고, 구체적인 도구 사용 가이드로 재가공하는 방향이 더 적합하다.

타자연습: 별도 제품으로 커지는 중

/typing 영역은 단순 미니 도구가 아니다. 자리연습, 낱말연습, 단문연습, 장문·필사, 속도 테스트 모드를 지원하고, 한국어·영어 전환, 한글 IME 조합 처리, 화면 키보드 힌트, 키별 약점 통계, 최고 기록 저장이 포함되어 있다.

더 중요한 부분은 브라우저 안에서 동작하는 로컬 데이터 구조다. 타자연습 영역은 Web Worker 안에서 SQLite WASM을 초기화하고, IndexedDB 스냅샷으로 데이터를 보존하며, 세션, 최고 기록, 키별 통계, 스트릭, 게임 점수를 저장한다. SQLite 단일 연결의 동시성 문제를 피하기 위해 큐 기반 락을 둔 점도 눈에 띈다.

이 부분은 사이트 전체에서 가장 “제품”에 가까운 축이다. 도구 허브가 검색 유입과 즉시 해결을 담당한다면, 타자연습은 반복 사용과 체류 시간, 브랜드 차별화를 담당할 수 있다.

브랜드와 UX 방향성

브랜드는 “Zero Human Studio”, “ZHS”, “oh-my-zhs”를 혼합해 사용한다. 홈 페이지는 도구, 타자연습, 글·인사이트, 신뢰를 순서대로 배치하고, 강한 카드형 UI와 그라디언트, 다크 스폿라이트 섹션, Bento Grid를 활용한다. 전반적으로 개발자 도구 사이트와 크리에이티브 스튜디오 사이트의 중간 지점을 지향한다.

현재 메시지에서 특히 강한 키워드는 실용성, 로컬 처리, 신뢰, AI 에이전트 기반 제작, 허위 지표 배제, 한국 사용 맥락이다. 다운로드 수나 사용자 수처럼 근거 없는 숫자를 사용하지 않겠다는 태도도 보인다. 이는 광고성 랜딩페이지보다 투명한 제작 노트와 도구 품질로 신뢰를 쌓겠다는 방향에 가깝다.

강점과 리스크

첫 번째 강점은 기능과 콘텐츠의 결합 구조가 이미 코드로 구현되어 있다는 점이다. 많은 사이트는 도구 페이지와 블로그가 분리되어 내부 링크가 약한데, 이 프로젝트는 도구 메타데이터, 관련 도구, 관련 가이드, 게시글 필터가 한 흐름으로 연결되어 있다.

두 번째 강점은 브라우저 로컬 처리라는 명확한 신뢰 포지션이다. PDF, 이미지, 개발자 텍스트, JSON/YAML 같은 도구는 사용자가 민감한 데이터를 붙여넣기 쉽기 때문에, 서버 업로드 여부를 명확히 말하는 것이 제품 가치가 된다.

세 번째 강점은 타자연습의 깊이다. 이 영역은 단순 SEO 도구보다 경쟁력이 높을 수 있다. 특히 한글 자모 기반 약점 분석과 게임화는 일반적인 계산기 사이트가 쉽게 복제하기 어려운 자산이다.

반대로 가장 큰 리스크는 포지셔닝이 넓어지고 있다는 점이다. 현재 사이트는 개발자 도구, 한국 생활 계산기, 파일 처리 도구, 콘텐츠 블로그, 타자연습 게임까지 모두 포함한다. 각각은 유효하지만, 사용자에게 “이 사이트가 정확히 무엇인가”를 한 문장으로 설명하는 힘이 약해질 수 있다.

추천 방향성

이 리포지토리는 앞으로 “한국어 사용자를 우선 고려한 로컬 퍼스트 작업 도구 + 깊이 있는 타자연습 제품 + 도구 사용 가이드 콘텐츠 허브”로 정리하는 것이 가장 자연스럽다. 에이전시 사이트처럼 서비스 판매를 전면에 두기보다는, 실제 도구와 글을 통해 유입을 만들고, 신뢰를 쌓은 뒤 연락·요청·피드백으로 이어지는 구조가 현재 코드와 가장 잘 맞는다.

결론

현재 agency-web은 이름과 달리 “에이전시 웹사이트”보다 실제 작동하는 도구 플랫폼에 가깝다. 단기적으로는 검색 유입 가능한 실용 도구와 가이드 콘텐츠를 촘촘히 연결하는 방향이 맞고, 중장기적으로는 타자연습을 독립적인 flagship product로 키울 수 있다.

따라서 방향성은 다음 한 문장으로 정리할 수 있다.