구직 중

풀스택
개발자

작동하는 것에 그치지 않고, 왜 작동하는지 알고 싶습니다.

Kalle Spets Blomberg입니다. 스웨덴 KTH 왕립공과대학교에서 컴퓨터공학 학사 학위를 받았습니다. 인터페이스, API, 데이터베이스, 배포까지 웹 앱을 처음부터 끝까지 만드는 일을 특히 좋아합니다.

Kalle Spets Blomberg
독서 시작해볼까 화면

독서 시작해볼까

나에게 맞는 책 추천받기

좋아하는 장르만이 아니라 책에서 무엇을 느끼고 얻고 싶은지를 묻는 한국어 도서 추천 퀴즈입니다. 하루 최대 40명의 사용자가 방문했고, 쿠팡 파트너스 제휴 링크로 수익을 냅니다. 에이전트 중심 개발을 실험하며 혼자 만들었습니다.

  • Claude Code
  • Next.js
  • React
  • JS
  • TailwindCSS
라이브 데모

‘독서 시작해볼까’는 재미있게 즐길 수 있는 도서 추천 서비스입니다. 몇 가지 질문에 답하면 읽을 만한 책을 추천해 줍니다. 좋아하는 장르처럼 간단한 질문도 있지만, 책을 읽으며 무엇을 얻고 싶은지, 어떤 감정을 느끼고 싶은지처럼 더 깊고 구체적인 질문도 합니다. 이미 나와 있는 일반적인 도서 추천 서비스와 차별화하기 위해 의도적으로 내린 설계 결정입니다.

하루 최대 40명의 사용자가 방문했고, 대체로 긍정적인 반응을 얻었습니다. Threads에 사이트를 공유하면서 “재밌는 아이디어!” 같은 말을 남긴 사용자도 있었습니다. 가장 많이 나온 아쉬운 점은 수록된 책이 적다는 것이었는데, 첫 개발 사이클에서는 의도적으로 적은 수의 책만 넣었기 때문에 충분히 예상한 반응이었습니다. 두 번째 사이클에서는 추천 알고리즘을 다듬고 도서 목록을 늘리는 데 집중하고 있으며, 이 글을 쓰는 시점에는 아직 진행 중입니다.

수익 모델은 쿠팡 파트너스 제휴 링크입니다. 사용자가 추천을 통해 책을 구매할 때마다 일정 비율의 수수료를 받습니다. 정식 파트너가 되기 전까지는 제휴 링크를 직접 하나씩 만들어야 해서, 처음부터 많은 책을 넣기가 더 어려웠습니다.

작업 방식

웹사이트는 혼자 개발했고, 구현의 상당 부분에 Claude의 Opus 5 모델을 활용했습니다. 이 기회에 에이전트 기반 워크플로도 실험해 보았습니다. Claude Code의 GitHub Actions 연동을 이용해 GitHub에서 바로 이슈를 처리하게 했고, 에이전트 개발을 세밀하게 이끌기 위한 Matt Pocock의 스킬처럼 널리 쓰이는 여러 Claude 스킬 세트도 시도했습니다.

이 앱을 개발하면서 가장 어려웠던 점은 에이전트와 방향을 맞추는 일이었습니다. 아이디어를 빠르게 바꿀 때면 에이전트가 이전 로직과 아이디어를 그대로 유지하려는 경향이 있어서, 새로운 아이디어를 정확하게 구현하는 데 방해가 되었습니다. 예를 들어 한번은 무엇을 해야 하는지 분명하게 지시했는데도 에이전트가 추천 알고리즘을 제대로 바꾸지 못했습니다.

지금은 컨텍스트를 신경 써서 관리하는 방식으로 이 문제에 대응하고 있습니다. 먼저 몇 개의 계획 에이전트로 큰 계획을 세운 뒤, 매번 깨끗한 컨텍스트에서 한 단계씩 구현합니다. 물론 서로 막히는 작업이 없다면 GitHub 워크플로 등을 이용해 여러 단계를 동시에 구현할 수도 있습니다.

추천 로직

추천 로직은 필터링과 점수 계산으로 이루어져 있습니다. 각 책에는 정해진 형식의 데이터가 붙어 있습니다. 예를 들면 다음과 같습니다.

{
  title: '죽고 싶지만 떡볶이는 먹고 싶어',
  author: '백세희',
  year: 2018,
  genre: ['essay'],
  ratings: {
    need: { comfort: 3, fun: 1, knowledge: 1, growth: 1, trend: 1, habit: 2 },
    priority: { easy: 3, depth: 1, bestseller: 3, happy: 1 },
    topic: {
      money: 0, relationship: 1, career: 0, mindcare: 3,
      society: 0, science: 0, history: 0, selfunderstand: 2,
    },
  },
  trendRatedAt: '2026-09-24',
  avoid: ['heavy'],
  difficulty: 1,
  length: 'short',
}

장르가 필터의 한 예로, 사용자가 고른 장르에 속한 책만 남깁니다. ratings와 topic에는 점수 계산에 쓰이는 값이 들어 있습니다. 필터를 통과한 책마다 사용자의 답변을 바탕으로 점수를 계산하는데, 사용자가 선호한 ratings와 topic 항목의 값이 높은 책일수록 점수가 높아집니다. 가장 높은 점수를 받은 책이 최우선 추천이 됩니다.

Run A Way 화면

Run A Way

러닝 경로 측정하기

Run A Way는 러닝 경로를 관리하는 앱입니다. 지도를 클릭해 경로를 그리면 거리와 그 경로에서 소모되는 칼로리를 계산해 줍니다. 비슷한 웹사이트를 써 본 적이 있지만 지도 조작 방식이 늘 아쉬웠기에, 더 매끄러운 사용자 경험을 갖춘 앱을 직접 만들었습니다.

  • Next.js
  • React
  • TypeScript
  • TailwindCSS
  • Material Tailwind
  • Leaflet.js
  • OpenStreetMap
구현 방식
Next.js, TypeScript, TailwindCSS로 작성했습니다. 무료로 쓸 수 있는 지도 API인 OpenStreetMap에는 Leaflet과 React-Leaflet 라이브러리로 접근하고, 버튼은 Material Tailwind로 만들었습니다.
어려웠던 점
React-Leaflet과 Leaflet은 문서화가 잘 되어 있지 않아서, Next.js에서 동작하게 만드는 것부터가 난관이었습니다. 근본적으로는 Next.js와의 호환성 문제 때문에 지도를 dynamic import로 불러와 지연 렌더링해야 한다는 것을 알게 되었습니다.
배운 점
이 프로젝트에서 얻은 가장 큰 배움은, 기본적으로는 서로 잘 맞지 않는 여러 JS 라이브러리를 함께 통합하는 일이었습니다. 예를 들어 Material Tailwind의 React 컴포넌트를 쓰려면 React 타입 의존성을 이전 버전으로 다운그레이드해야 했습니다. 이런 상황을 겪고 나니 Node와 React, 그리고 모듈이 서로 어떻게 맞물려 동작하는지에 대한 탄탄한 기본기가 정말 중요하다는 것이 분명해졌습니다.
Would You Rather - Programmer Edition 화면

Would You Rather - Programmer Edition

나의 프로그래머 성향 알아보기

두 가지 시나리오 중 더 마음에 드는 쪽을 고르는 밸런스 게임입니다. 선택하고 나면 각 선택지를 고른 사람들의 비율을 보여 줍니다.

  • React
  • TypeScript
  • Go
  • Docker
  • CI/CD
구현 방식
프론트엔드는 TypeScript, React, TailwindCSS로, 백엔드는 Go와 SQLite로 작성했습니다. 백엔드는 시나리오 쌍을 제공하고, 모든 시나리오를 다 볼 때까지 같은 시나리오가 두 번 나오지 않도록 무작위 시나리오를 가져오는 엔드포인트를 노출합니다. 프론트엔드와 백엔드 모두 처음부터 직접 설계하고 구현했습니다. 프론트엔드에서는 게임 외에도 컬러 테마를 바꿀 수 있는데, 주로 개발하면서 마음에 드는 색을 쉽게 고르려고 만든 기능입니다.
어려웠던 점
백엔드 개발에서 가장 어려웠던 부분은 API를 설계하고 사용자가 같은 시나리오를 두 번 받지 않도록 막는 일이었습니다. 하지만 대부분의 시간은 프론트엔드에 들었고, 가장 큰 난관은 여러 게임 상태를 다루는 것이었습니다. 게임 상태에 따라 UI를 세밀하게 바꿔야 했는데, 처음 예상보다 훨씬 까다로웠습니다. 시각적 피드백을 처음부터 계획하지 않고 개발 도중에 확장한 것도 한 원인이었습니다.
배운 점
이 앱을 만들면서 아무것도 없는 상태에서 실제로 동작하는 애플리케이션을 완성하기까지의 과정을 배웠습니다. 기획부터 디자인, 개발 파이프라인, 구현, 호스팅까지 모두 혼자 해냈습니다. 프로그래밍뿐 아니라 사용자 관점에서 개발하는 법도 배웠습니다. 마케팅 분야 출신인 사람이 앱을 쓰는 모습을 지켜보며 처음 쓰는 사람이 인터페이스를 얼마나 다르게 읽는지 알게 되었고, 여러 UI 결정이 그 피드백에서 바로 나왔습니다. 무엇보다 가장 큰 배움은 개발 프로세스에 있었다고 생각합니다. 개인 프로젝트에 GitHub Actions로 CI/CD 파이프라인을 구축한 것은 이때가 처음이었습니다.
Chatapp 화면

Chatapp

언제나 연결되는 채팅

Discord에서 영감을 받은 채팅 애플리케이션입니다. 백엔드에는 Node.js, Express, Socket.IO를, 프론트엔드에는 create-react-app으로 만든 React를 사용했습니다.

  • React
  • JS
  • NodeJS
소스 코드
구현 방식
Chatapp은 React와 TailwindCSS로 만든 프론트엔드, 그리고 Express.js와 Socket.io를 사용하는 Node.js 백엔드, 두 부분으로 이루어져 있습니다. 영구 저장소 없이, 생성된 사용자나 보낸 메시지 같은 모든 데이터를 메모리에서 처리합니다.
어려웠던 점
가장 어려웠던 부분은 서버와 클라이언트 사이의 모든 통신이 올바르게 처리되고, 양쪽의 데이터 표현이 서로 호환되도록 만드는 일이었습니다. 특정 요청을 처리하는 방식을 여러 번 다시 고민해야 했고, 그 결과 서버 개발을 뒷받침하는 탄탄한 단위 테스트를 갖추게 되었습니다.
배운 점
이 프로젝트에서 얻은 큰 교훈은 서버의 데이터 변환 로직에 탄탄한 단위 테스트를 갖추면 적은 노력으로 큰 효과를 얻는다는 점입니다. 이를 계기로 작업 방식이 바뀌기 시작해, 지금은 서버 코드를 작성할 때 항상 테스트를 함께 작성하고 단위 테스트로 옮기기 쉬운 구조로 구현하려고 합니다. 덕분에 무언가가 갑자기 예상과 다르게 동작할 때 골치 아플 일이 크게 줄었습니다.