WebPiki를 시작하며 — 이 사이트를 만든 이유

WebPiki에 오신 것을 환영합니다

솔직히 말하면 이 사이트를 만들겠다고 마음먹은 건 꽤 단순한 이유에서였다.

매번 같은 걸 검색하고 있었다

개발하다 보면 JSON 포맷 한번 맞춰보려고 구글에 "json formatter" 검색하고, Base64 디코딩할 일 있으면 또 검색하고. 솔직히 북마크해두면 되는 건데, 매번 새 탭 열고 검색하는 게 습관이 됐다. 그런데 이런 도구 사이트들이 대부분 광고가 떡칠이거나, 로딩이 느리거나, UI가 2010년대에서 멈춰있더라.

정규식 하나 테스트하려고 열었는데 팝업 광고 세 개를 닫아야 하는 상황. 색상 코드 하나 변환하려는데 페이지가 3초 걸려서 로딩되는 상황. 이런 게 쌓이다 보니 "그냥 내가 만들면 안 되나?"라는 생각이 들었다.

이게 시작이었다.

근데 도구만 있으면 좀 심심하잖아

처음엔 정말 개발자 도구 모음 사이트로만 생각했다. JSON 정리기, 해시 생성기, 인코더/디코더... 이런 것들. 근데 어차피 웹사이트 만드는 거, 간단한 게임도 올려보면 어떨까 싶었다. 점심시간에 10분 때울 수 있는 그런 가벼운 것들. 2048이나 스네이크 게임 같은 거.

별도 앱 설치 없이, 회원가입 없이, 브라우저에서 바로 플레이할 수 있는 게임. 의외로 이런 간단한 걸 찾기가 쉽지 않다. 대부분의 브라우저 게임 사이트도 광고투성이거나 Flash 시대에 머물러 있으니까.

거기에 블로그까지 붙이면 나름 괜찮은 사이트가 되지 않을까 했다. 평소에 공부하면서 정리하던 내용들을 블로그에 올리면 나한테도 도움이 되고.

WebPiki가 제공하는 것들

개발자 도구 — JSON 포맷터, Base64 인코더, 색상 변환기, 정규식 테스터 같은 실용적인 도구들. 깔끔한 UI, 빠른 로딩, 광고 범벅 없이.

브라우저 게임 — 클래식 게임들이 브라우저에서 바로 돌아간다. 설치도 없고 계정도 필요 없다. 그냥 열고 플레이하면 된다.

기술 블로그 — AI 트렌드, 웹 개발 팁, 클라우드 인프라, 보안 관련 글들. 뻔한 입문 글이 아니라, 실무에서 실제로 쓸 만한 정보 위주로 작성한다.

생활 계산기와 템플릿 — BMI 계산기, 날짜 계산기 같은 일상 도구부터, gitignore 생성기 같은 개발 템플릿까지. 자주 필요한데 매번 찾아 헤매는 것들을 모아두었다.

기술 스택은 좀 과한 감이 있지만

Next.js에 TypeScript, Tailwind CSS. 도구 모음 사이트치고는 좀 오버스펙 아니냐는 생각도 들었는데, 어차피 공부 겸 만드는 거라 최신 기술로 가기로 했다. Vercel에 올리니까 배포도 편하고.

아키텍처는 클린 아키텍처를 적용했다. 이것도 사실 이 규모에서는 과하긴 한데, 나중에 기능이 늘어날 걸 생각하면 처음부터 깔끔하게 잡아두는 게 낫다고 판단했다. domain, core, infra, features로 레이어를 나눠서, 게임이든 도구든 features/ 안에 폴더 하나 만들고 레지스트리에 등록하면 자동으로 페이지가 생기는 구조다.

새 도구를 추가하는 흐름은 이렇다:

features/tools/ 아래에 폴더를 만든다
메인 컴포넌트를 작성한다
레지스트리에 한 줄 등록한다
끝. 라우팅, 메타데이터, 사이트맵 전부 자동 처리

게임도 똑같은 구조다. 이렇게 해두니까 새 콘텐츠를 추가하는 데 드는 시간이 확 줄었다. 보일러플레이트를 최소화하고 실제 기능 구현에만 집중할 수 있다.

왜 한국어와 영어 둘 다 지원하나

WebPiki는 한국어와 영어 콘텐츠를 모두 제공한다. 블로그 글도 두 언어로 작성하고, 도구와 게임도 다국어를 지원한다.

이유는 간단한데, 기술 블로그를 읽다 보면 영어 원문이 더 정확하거나 자세한 경우가 많다. 한국어로 번역된 글이 원문의 뉘앙스를 놓치는 경우도 있고. 그래서 양쪽 다 제공하면 좋겠다고 생각했다. 한국어가 편한 사람은 한국어로, 영어가 편한 사람은 영어로 읽으면 된다.

도구 쪽에서도 다국어는 중요하다. 개발자 도구를 쓰는 사람이 한국에만 있는 게 아니니까. 처음부터 글로벌을 고려해서 만들면 나중에 따로 국제화 작업을 안 해도 된다. Next.js의 라우팅 구조가 이런 다국어 처리에 잘 맞아서, 기술적으로도 큰 부담은 없었다.

앞으로 뭘 올릴 건지

당장은 이런 것들부터 하나씩 채워나갈 생각이다:

개발자 도구 — JSON 포맷터, Base64 인코더, 색상 변환기, 정규식 테스터, JWT 디코더 같은 실용적인 것들
생활 계산기 — BMI 계산기, 연봉 실수령액 계산기, 날짜 계산기, 단위 변환기
템플릿 생성기 — gitignore 생성기, Dockerfile 빌더, README 템플릿
웹 게임 — 2048, 테트리스, 지뢰찾기, 스네이크 같은 클래식 게임들
블로그 — AI 트렌드, 웹 개발 팁, 보안 관련 글, 클라우드 인프라 가이드

한번에 다 만들 수는 없으니까 조금씩 추가할 예정이다. 도구와 게임은 각각 독립된 모듈로 만들어지기 때문에, 기존 기능에 영향 없이 새로운 걸 계속 붙여나갈 수 있다.

혹시 "이런 도구 있으면 좋겠다" 싶은 게 있으면 문의 페이지로 알려주면 좋겠다. 실제로 필요한 기능 위주로 우선순위를 정하고 있어서, 피드백이 큰 도움이 된다. 도구뿐 아니라 블로그에서 다뤘으면 하는 주제가 있어도 마찬가지다.

사이드 프로젝트를 하는 이유

본업이 따로 있는데 사이드 프로젝트를 왜 하냐는 질문을 가끔 받는다. 대단한 이유는 없다. 회사에서는 정해진 기술 스택과 아키텍처 안에서 일하는데, 사이드 프로젝트에서는 새로운 기술을 마음대로 써볼 수 있다. 회사 프로젝트에 바로 적용하기 어려운 것들 — 최신 프레임워크 버전, 새로운 아키텍처 패턴, 써보고 싶었던 라이브러리 — 을 실험하는 놀이터 같은 거다.

WebPiki를 만들면서 Next.js App Router의 서버 컴포넌트 구조를 본격적으로 다뤄봤고, Tailwind CSS v4의 CSS 기반 설정도 처음 써봤다. 이런 경험이 본업에도 도움이 되더라. "이 기술은 어떤 상황에서 쓰면 좋고, 어떤 상황에서는 안 맞겠구나"를 몸으로 알게 되니까.

그리고 솔직히 뭔가 만들어서 올리는 게 재밌다. 도구 하나를 만들어서 배포했는데 누군가 쓰고 있다는 걸 알면 그것만으로 동기부여가 된다. 사이드 프로젝트의 가장 큰 장점은 아마 이거일 거다 — 순수하게 재미로 할 수 있다는 것.

마무리

뭐, 거창한 비전 같은 건 없다. 그냥 내가 자주 쓰는 도구들을 깔끔하게 모아두고, 심심할 때 게임 한판 하고, 가끔 글도 올리는 사이트. 그게 WebPiki다.

광고 범벅 없이 필요한 기능만 빠르게 쓸 수 있는 곳. 그런 사이트를 만들고 싶었고, 조금씩 그 방향으로 가고 있다.

도구 하나, 게임 하나, 글 하나씩 쌓이다 보면 언젠가는 꽤 쓸만한 사이트가 되지 않을까. 급하게 키울 생각은 없다. 꾸준히, 하나씩.

방문해주셔서 고맙고, 종종 들러주시면 더 고맙겠습니다.