const developer = {
name: "이해람 (Haeram Lee)",
role: "Frontend Lead",
experience: "6+ years",
philosophy: "사람을 위한 프로덕트를 만듭니다",
};
6년 차, 사람을 위한 프로덕트를 만드는 프론트엔드 개발자입니다.
저의 모든 실행 동기는 사람에 대한 관심에서 비롯됩니다.
함께 일하는 동료와 실제 사용자의 경험을 개선하는 것에 집중합니다.
"개발도 사람이 하는 일, 프로덕트는 사용자를 위한 것"
- 🤝 Developer Experience: 팀원들의 생산성과 행복을 위한 개발 문화 조성
- 👥 User Experience: 현장 리서치를 통한 실사용자 중심의 제품 개선
- 🏗️ Architecture: 지속 가능하고 확장 가능한 코드베이스 설계
더 자세한 내용이 궁금하시다면 포트폴리오를 확인해보세요!
실무에서 경험한 아키텍처를 보일러플레이트로 정리해놓은 레포지토리입니다.
Tech Stack: pnpm workspace · Turborepo · TypeScript · gRPC
💡 어떤 문제를 해결하나요?
React Web, Flutter Mobile, BFF Server, Backend Server를 하나의 레포지토리에서 관리하며, 효율적인 코드 공유와 타입 안정성을 보장합니다.
실무 경험:
- 4개의 앱(React, Flutter, BFF, Backend)을 단일 레포에서 관리
- gRPC/connect-rpc 기반 타입 안전한 통신
- 공통 타입 정의를 패키지로 분리하여 중복 제거
- pnpm workspace로 빠른 설치 및 효율적인 디스크 사용
주요 특징
-
📦 패키지 구조
apps/web: React 웹 애플리케이션apps/mobile: Flutter 모바일 앱apps/bff: Backend for Frontend 서버apps/backend: 백엔드 API 서버packages/shared: 공통 타입, 유틸리티packages/proto: gRPC 프로토콜 정의
-
⚡ 빌드 최적화
- Turborepo 캐싱으로 빌드 시간 단축
- 변경된 앱만 선택적 빌드
- 병렬 빌드로 CI/CD 속도 향상
-
🔒 타입 안정성
- 프로토콜 버퍼에서 TypeScript 타입 자동 생성
- 공통 타입 패키지를 통한 일관된 데이터 구조
- API 변경 시 컴파일 타임에 오류 감지
-
🛠️ DX 개선
- 통합된 린팅/포매팅 설정
- 단일 명령어로 모든 앱 실행
- 의존성 버전 중앙 관리
Tech Stack: React · TypeScript · FSD
💡 어떤 문제를 해결하나요?
도메인 중심 개발로 응집도 높은 코드를 작성합니다.
주요 특징
- 📁 Layers: app / pages / widgets / features / entities / shared
- 🔄 Dependency Rule: 하위 레이어만 참조 가능
- 🎯 Feature-Sliced: 기능별 독립적 개발 가능
Tech Stack: TypeScript · Clean Architecture · DI Container
💡 어떤 문제를 해결하나요?
비즈니스 로직을 UI/프레임워크로부터 분리하여 테스트 가능하고 유지보수하기 쉬운 코드를 만듭니다.
주요 특징
- 🎯 Domain: 순수 비즈니스 로직
- 🔌 Application: 유즈케이스 구현
- 🌐 Infrastructure: 외부 의존성 (API, DB 등)
- 🖼️ Presentation: UI 레이어
개인적으로 진행 중인 사이드 프로젝트입니다.
Tech Stack: React 19 · React Native · Three.js (WebGPU/TSL) · Go 1.26 · Connect-RPC · PostgreSQL + pgvector · Claude API
📝 프로젝트 컨셉
일기를 쓰면 AI가 그 경험을 별로 띄웁니다. 별은 사람·장소·주제 같은 작은 조각들로 되어 있고, 같은 조각을 가진 별끼리는 선으로 이어집니다. 같이 떠올린 기억은 선이 굵어지고, 오래 안 떠올린 별은 어두워집니다. 그래도 사라지지는 않습니다.
통계도 조언도 없습니다. 내 기억이 만든 우주를 떠다니며 지난 삶을 돌아보는 3D 일기입니다.
기억을 자료구조로 옮기기
- 🌟 기억의 별 (
EpisodicMemory) — 일기 한 편이 여러 기억으로 쪼개지고, 그 하나하나가 별이 됩니다 - ✨ 조각 (
Neuron) — 별을 이루는 재료입니다. 주제 · 장소 · 사람 세 종류이고, 여러 별이 같은 조각을 함께 씁니다 - 🔗 선 (
Synapse) — 선은 조각과 조각 사이에만 놓입니다. 별과 별을 바로 잇는 선은 아예 없습니다 - 🌠 별자리와 성운 — 만들어서 저장하지 않습니다. 조각을 많이 나눠 쓰는 별들이 가까이 모이면 별자리처럼 보이고, 옆에 있는 별빛 색이 섞이면 성운처럼 보입니다
💡 제일 오래 붙잡고 있었던 건 "무엇을 저장하지 않을까"였습니다. 별자리에 테이블을 하나 주는 순간, 없애려고 했던 별↔별 연결이 슬그머니 되살아납니다.
뇌를 따라간 규칙들
- 같이 떠오른 조각끼리는 연결이 세지고, 안 쓰인 연결은 약해집니다. 어느 쪽이든 연결을 지우지는 않습니다
- 기억을 떠올릴 때마다 문장이 조금씩 바뀝니다. 대신 사용자가 쓴 원본 일기는 손대지 않습니다
- 잊는 건 지우는 게 아닙니다. 끝까지 어두워지기만 하고 0이 되지 않습니다
- 기억이 요약되는 것과 흐려지는 것은 따로 갑니다. 뜻만 남았는데 밝은 별도, 문장은 남았는데 어두운 별도 있습니다
- 잠든 사이에는 모든 연결을 조금씩 같이 낮춥니다. 안 쓰여서 약해지는 것과는 다른 방식입니다
규칙을 사람이 아니라 CI가 지키게
이름은 하나만 씁니다
Go 타입 · DB 테이블 · proto · 프론트 도메인이 모두 같은 이름을 씁니다. 한 가지에 이름 하나입니다.
그 목록을 spec/ubiquitous-language.md에 적어두고, 직접 만든 린터가 어긋난 이름을 CI에서 잡습니다.
화면용 단어(star · filament · nebula)는 프론트 안에서만 씁니다. 도메인이나 DB로 넘어오면 린트가 막습니다.
잘 지키자고 약속하는 대신, 못 하게 만들었습니다.
| 검사 | 막는 것 |
|---|---|
lint:language |
같은 걸 다른 이름으로 부르거나, 화면 단어를 도메인에 쓰기 |
lint:fsd+boundaries |
아래 레이어가 위 레이어를 가져다 쓰기 |
lint:persistence |
도메인 코드에 SQL이나 DB 타입이 새어 들어오기 |
lint:raw-strings |
화면 문장을 코드에 그대로 박아서 번역을 건너뛰기 |
lint:comments |
"원래는 ~였다"처럼 시간이 지나면 틀려지는 주석 |
린터마다 일부러 틀린 코드를 하나씩 두고, 그걸 제대로 잡는지 같이 확인합니다. 검사기가 조용히 고장 난 채로 초록불만 켜져 있는 게 제일 위험합니다.
한 군데만 고치면 나머지가 따라옵니다
proto/하나에서 Go 서버 코드와 TS 클라이언트 코드가 같이 나옵니다- 숫자 상수는
spec/values.yaml한 파일에만 두고, 거기서 TS와 Go 파일을 만들어 냅니다 - 기억 계산식은 서버(Go)와 브라우저 데모(TS) 양쪽에 있어서, 같은 입력에 같은 값이 나오는지 테스트로 묶어 둡니다
3D 화면은 웹과 앱이 같은 코드입니다
@cosimosi/3d-renderer 하나를 웹(WebGPU)과 React Native가 그대로 씁니다.
셰이더도 문자열이 아니라 TypeScript로 써서 타입 검사를 받습니다.
패키지 19개 — 두 번 이상 쓰이는 걸 확인한 다음에 공용으로 내립니다. 미리 빈 패키지를 만들어 두지 않습니다.
문서를 먼저 쓰고 코드를 씁니다
무엇을 왜 어떻게 만드는지가 전부 spec/에 있습니다. 코드와 문서가 어긋나면 문서가 맞습니다.
- 📚 문서 256편, 약 59,000줄
- 🔄 기획 문서 → 작업 문서 → 구현 순서로 가고, 다 만들면 결과를 기획 문서에 되돌려 적습니다
- ✅ 끝낸 작업 99편. 통과 기준을 다 맞추고 코드 리뷰를 넘겨야 닫힙니다
- 🤖 규칙을 문서에 못 박아 두면, 사람이 쓰든 AI 에이전트가 쓰든 같은 규칙으로 코드가 나옵니다
하면서 알게 된 것
- 규칙을 문서에만 적어두면 언젠가 어긋납니다. 검사기로 만들어야 남습니다
- 어려운 건 3D도 뇌과학도 아니었고, 무엇을 데이터로 만들지 않을지 고르는 일이었습니다
- 서버와 프론트, 웹과 앱이 같은 단어를 쓰면 회의도 코드 리뷰도 짧아집니다
Tech Stack: Next.js 15 · tRPC · Prisma · PostgreSQL · Gemini AI
📝 프로젝트 컨셉
뇌가 기억을 다루는 방식을 그대로 따라가 본 일기 앱입니다. 일기를 기억의 최소 단위로 쪼개고, 그 기억들이 서로 얽히는 모습을 흉내 냈습니다.
위의 cosimosi 는 여기서 얻은 답으로 도메인을 다시 세운 다음 작업입니다.
주요 특징
🔬 핵심 메커니즘
-
🧩 기억의 최소 단위 — 일기를 뜻이 통하는 단위로 쪼갭니다 (예: "카페에서 마신 커피", "비 오는 날의 풍경")
- 언제 어디서 있었던 일인지, 어떤 감정이었는지, 어떤 종류의 기억인지를 함께 담습니다
- 시간이 지나면 망각 곡선에 따라 저절로 옅어집니다
-
🔗 연결을 두 층으로 — 얼마나 세게, 그리고 왜
- 시냅스: 얼마나 세게 붙어 있는지
- 관계: 왜 붙어 있는지 (시간 / 장소 / 원인)
-
🏗️ 빠른 기억과 느린 기억
- 해마: 새 경험을 바로 받아 적는 쪽
- 대뇌피질: 여러 번 떠올린 기억을 오래 두는 쪽
🧪 기댄 이론들
- 헵의 규칙: 함께 발화하는 뉴런은 함께 연결된다
- 에빙하우스 망각 곡선: 시간이 지나면 기억이 옅어진다
- 재공고화: 떠올릴 때마다 기억이 다시 쓰인다
- 인코딩 특수성: 그때의 상황이 기억을 꺼내는 단서가 된다
💡 왜 만들었나
- 이론으로만 읽던 것을 실제로 돌아가는 앱으로 만들어 보고 싶었습니다
- LLM을 쓰는 부분을 레이어로 나눠서, 모델이 바뀌어도 앱은 안 흔들리게 해봤습니다
- 결국 궁금했던 건 "기억이란 뭘까"였고, 그걸 코드로 물어본 셈입니다
- 남은 것
- 복잡한 도메인을 모델로 옮기는 감각
- tRPC로 타입이 끊기지 않는 풀스택 만들기
- LLM으로 사람 말을 정해진 형태의 데이터로 바꾸기