/

Portfolio 포트폴리오

Projects 프로젝트

A selection of products I've built, contributed to, or shipped. 직접 만들고, 기여하고, 출시한 프로젝트들.

01

MoldNote

2025.01 – 2025.04
Frontend 100%

제조업체의 금형 제작 프로세스와 원가 관리를 디지털화한 전사적 관리 시스템입니다. 작업자의 일일 작업일지 작성부터 관리자의 결재 승인, 금형별 상세 원가 분석을 하나의 플랫폼에서 통합 관리합니다.

복합 입력 폼, 정렬·페이징·CSV 다운로드 테이블, 인터랙티브 차트 시각화, 권한별 메뉴 접근 제어, 다단계 결재 워크플로우 등 B2B 대시보드에 필요한 핵심 기능들과 복잡도 높은 UI를 100% 담당했습니다.

데이터 입력 오버헤드를 줄이고 관리자에게 실시간 원가 가시성을 제공했습니다.

Manufacturers lose hours every day tracking mold production across scattered spreadsheets and paper logs — errors compound, approvals get lost, and cost visibility is near zero.

I built MoldNote's entire frontend from scratch: a B2B enterprise dashboard that centralizes factory-floor workflows on a single platform. The core challenge was taming deeply complex UI requirements — multi-level approval workflows, permission-scoped menus, sortable/paginated tables with CSV export, and interactive Recharts visualizations — while keeping the interface intuitive for non-technical factory workers.

The result: digitized daily logs, manager approval flows, and per-mold cost analysis in one place. Reduced data-entry overhead and gave managers real-time visibility into production costs.

Stack 스택

React, TypeScript, React Hook Form, Tailwind CSS, shadcn/ui, TanStack Table, Recharts, Zustand, TanStack Query, Axios

02

ATIV MUSIC

2025.05 – 2025.06
Frontend 100%

Web3 음악 플랫폼 ATIV MUSIC의 전체 UI/UX 리뉴얼을 담당했습니다.

체인별로 분리되어 있던 인증 방식을 Privy 기반 멀티체인·멀티월렛 구조로 전환하는 것이 핵심 작업이었으며, 토큰 교환 플로우와 계정 관리 페이지를 새롭게 구축하고 UI/UX 전반을 리디자인했습니다.

Privy 통합으로 지갑 복잡도를 web2 수준의 로그인 UX로 추상화하여 일반 사용자 진입 장벽을 낮추는 것이 핵심 과제였습니다.

Web3 music platforms lose users at authentication — per-chain wallet setup is confusing even for crypto-natives.

I delivered a full UI/UX overhaul for ATIV MUSIC, a Web3 music platform. The core work was migrating the authentication system from a fragmented per-chain model to Privy-powered multi-chain, multi-wallet support — alongside a token exchange flow and account management pages as part of the redesign.

The Privy integration abstracts wallet complexity behind a familiar web2-style login surface, meaningfully lowering the barrier for mainstream adoption.

Stack 스택

Next.js, TypeScript, Tailwind CSS, GraphQL, NextAuth.js, Privy, Styled-Components

03

Aidrawing

2024.08
Frontend 100%

어린이 영어 학습 앱으로, 영어로 그리고 싶은 것을 설명하면, AI로 그려진 그림이 나타납니다.

시각적 보상 루프가 아이들의 영어 발화 동기를 높이는 핵심입니다. 귀여운 캐릭터와 인터랙티브한 UI, 실시간 AI 이미지 생성 연동, 어린이 기기에 맞는 반응형 디자인을 100% 담당했습니다.

한 달 만에 전체 프론트엔드를 완성해 출시했습니다.

Teaching kids to speak English requires immediate, tangible rewards — abstract grammar exercises don't cut it.

Aidrawing lets children describe what they want to draw in English, then AI generates the picture in real time. The visual reward loop makes kids want to keep talking. I owned the entire frontend: child-friendly UI with expressive characters, real-time AI image generation integration, and a response design that works on small phone screens kids actually use.

Shipped end-to-end in a single month.

Stack 스택

React, TypeScript, Tailwind CSS

04

3PM

2022.09 – 2023.12
Frontend 90%

Web3 기반 NFT 음반 및 티켓 판매 플랫폼의 UI/UX 전면 리뉴얼과 미디어 브라우저, 인증 모듈을 개발했습니다.

미디어 브라우저(구매 상품 상세 페이지)에서는 음원·영상 재생, 재생목록, 이미지 브라우징, 파일 다운로드가 가능합니다. 티켓에는 QR 코드가 포함되며, 공연 관리자용 입장 확인 페이지도 별도 제공됩니다.

web3auth와 ethers.js를 활용해 Web3의 복잡성을 일반 이커머스 수준의 UX로 추상화하는 것이 핵심 과제였습니다.

Web3 content platforms had a UX problem: wallets, gas fees, and confusing ownership made purchasing NFT music albums feel intimidating, not premium.

I led the full UI/UX renewal for 3PM, a platform selling NFT music albums and event tickets. The flagship challenge was building the media browser — the post-purchase experience where buyers play their music, watch videos, browse album art, download files, and manage playlists. For event tickets, I built a QR-code verification system used by event staff at the door.

Also owned the Web3 auth module (web3auth) and ethers.js wallet integration — bridging Web3 complexity into flows that feel like any other e-commerce checkout.

Stack 스택

Next.js, React, TypeScript, Tailwind CSS, ethers.js, web3auth

05

WhatToSay

2020.05 – Present
Development 100% Planning 50% Operations 50%

다양한 상황, 특히 비즈니스 상황에서 사용할 수 있는 커뮤니케이션 템플릿을 제공하는 서비스를 직접 기획하고 개발했습니다.

Firebase Firestore로 템플릿 DB와 실시간 채팅을, Cloud Functions로 멤버십 결제 웹훅을, Algolia로 수천 개 템플릿의 즉시 검색을 구현했습니다.

5년 이상 운영하며 제품-시장 적합성, 리텐션, 솔로 제품 운영에 대해 가장 많이 배운 프로젝트입니다.

Business communication is full of awkward moments — asking for a raise, declining a request, following up on an invoice. Most people waste time drafting from scratch or settle for generic templates.

I founded and built WhatToSay: a platform providing professionally-crafted communication templates for business situations. I'm responsible for the entire product — from architecture to operations. Firebase Firestore powers the template database and real-time chat; Cloud Functions handle membership payment webhooks (Nicepay); Algolia drives instant search across thousands of templates.

The product has been live and iterating for 5+ years. Learned more about product-market fit, retention, and running a solo product than any other project.

Stack 스택

React, TypeScript, Tailwind CSS, Styled-Components, Firebase Firestore / Auth / Hosting / Cloud Functions, Naver Login, Algolia, Nicepay