Hello · This is what I built · 2019–2026

그래서 뭐 만들었냐고요?
바로 보여드릴게요.

프론트엔드로 시작했는데, 하다 보니 서버도 보고 배포도 하고 AI도 붙이고 있었습니다. 문제가 생기면 제 담당인지부터 따지기보다 어디서 꼬였는지부터 찾아갑니다.

화면만 만들진 않았습니다API, DB, 배포까지 필요하면 직접 봤습니다.
잘 되는 건 기본이고두 번 눌렀을 때, 끊겼을 때, 다시 시도했을 때도 확인합니다.
새 거 나오면 일단 써봅니다AI든 개발 도구든 직접 써보고 괜찮으면 팀에도 공유합니다.

GitHub ai-ng.co.kr

박상욱 Sangwook Park · Frontend 중심 Full-stack Developer · Backend · Infra · AI/AX

Career at a glance

처음엔 프론트엔드였습니다. 지금은 이것저것 다 봅니다.

작은 팀에서 서비스를 만들다 보니 화면만 보고 있을 수가 없었습니다. API도 보고, DB도 보고, 배포도 하다 보니 자연스럽게 지금의 범위가 됐습니다.

2019–2022
㈜아와소프트
공공·기업 SI · 실시간 관제 · AI 결과 검증 화면
AI 결과를 사람이 확인하는 화면 도로 영상 분석 결과를 담당자가 직접 확인하고 판단할 수 있는 검증 화면을 만들었습니다.
관제AI 검증
2022–2023
㈜데브락
2인 팀 · Figma 기반 디자인 협업 · 여기가게 앱·파트너센터 · 영상 파이프라인
영상 업로드에서 재생까지 촬영·편집·업로드·변환·배포·재생을 구간별로 나눠 문제의 시작점을 찾았습니다.
숏폼위치 기반
2024–2025
애자일그로스㈜
2~3인 팀 · 화면부터 API·AWS·배포까지 A to Z
화면부터 서버와 배포까지 2~3인 팀에서 웹과 API, AWS 환경과 배포를 맡아 서비스를 통째로 세웠습니다.
웹APIAWS
2025–2026
ZIVO
이용자용 웹 · 백오피스 공통 기반 · 여러 도메인의 서버 기능
웹백오피스서버

스크롤하면 한 줄씩 채워집니다.

ZIVO · 9개월간 만든 것들

ZIVO에서는 웹부터 시작해서 백오피스와 서버까지 갔습니다.

이용자용 웹을 설계부터 운영까지 맡았습니다. 운영 화면이 필요하면 백오피스를 만들고, 서버에서 막히면 API를 고쳤습니다. 병원·택시·호텔·eSIM·QR 주문과 검색·결제·AI·쿠폰·물류까지 실제 서비스 흐름을 따라가며 작업했습니다.

지원 언어

웹 PR

운영 화면

0회

결제 테스트 연속 성공

화면에서 안 풀리면 서버까지 갔습니다. 담당 저장소를 나누기보다 사용자가 막힌 지점부터 따라가며 필요한 곳을 고쳤습니다.

Quality · 가끔부터 없애기

테스트가 가끔 실패했습니다. 그래서 ‘가끔’부터 없앴습니다.

결제 기능에는 문제가 없었는데 자동 테스트는 가끔씩 실패했습니다. 시간을 더 기다리게 만드는 대신 왜 실패하는지 찾고, 반복해도 결과가 같도록 고쳤습니다.

$ bun test e2e/payment✓ 장바구니 담기✓ 주문서 이동✗ 결제 버튼 클릭 … timeout 30s1 failed, 2 passed (flaky 3/10)

문제 · 실서버 결제 테스트가 느리고 가끔 실패합니다
자동 검사에 올리기 어려웠습니다.
원인 · 결제 로직이 아니었습니다
화면이 준비되기 전에 클릭이 먼저 들어가는 문제였습니다.
해결 · 화면이 준비됐는지 확인한 뒤 클릭
기다리는 시간을 늘리는 대신 준비 신호를 기다리도록 테스트 방식을 바꿨습니다.
다시 실행 · 10회 연속 성공
반복해도 결과가 같습니다.

Implemented product · User web

책상 위 모니터엔 이용자용 웹.

검색으로 들어온 해외 사용자가 앱 설치 없이 병원·숙소를 찾고 주문과 결제까지 이어갈 수 있는 웹입니다.

검색해 들어와도 바로 자기 언어로14개 언어가 검색에서도 각각 제대로 노출되도록 주소 구조부터 나눴습니다.
앱 설치 없이 결제까지장소 확인, QR 주문, 장바구니와 결제를 하나의 웹 흐름으로 연결했습니다.
실패해도 길을 잃지 않게뒤로 가기, 결제 취소, 0원 주문과 판매 불가 상황에서도 돌아올 길을 만들었습니다.

실제 화면 직접 눌러 보기 ↗

AI · 일단 제가 먼저 써봅니다

새 AI가 나오면 후기보다 먼저 켜봅니다.

무료 한도만으로 모르겠으면 소액이라도 결제해서 써봅니다. 남의 평가보다 제 일에서 진짜 쓸 만한지가 더 궁금합니다.

새로 나오면 일단 설치

Orca, Buzz, Aside, cmux처럼 새로운 도구가 보이면 직접 써봅니다. 괜찮은 건 팀에도 바로 공유합니다.

모델도 직접 붙여봄

Claude, GPT, Gemini, Grok에 같은 작업을 던져보고 잘하는 것과 애매한 것을 비교합니다.

좋다는 말보다 내 손으로 확인

코딩도 시켜보고 문서도 맡겨봅니다. 실제 업무 흐름에 넣어 쓸 수 있는지도 확인합니다.

괜찮으면 팀에도 전파

어디에 쓰면 좋은지, 기존 도구보다 무엇이 나은지까지 정리해 팀원들과 공유합니다.

직접 써봄비교해봄괜찮으면 공유쓸 곳이 있으면 적용

이 사이트도 그렇게 만들었습니다.Claude Fable 5.1에게 만들게 하고, 아잉 영상은 Higgsfield로 뽑았습니다. 만든 다음엔 직접 열어보고 틀린 곳을 고치게 했습니다.

Self review · 이 사이트 자체

다 만들었다고 끝이 아닙니다.

직접 열어봅니다. 버튼도 눌러봅니다. 이상하면 다시 고칩니다. 아래는 이 사이트에 실제로 돌린 검수입니다.

구조experience/ 아래 state · timeline · mascot · scene 으로 나눴습니다. 연출은 전부 스크롤 위치의 함수입니다.
PASS
화면1440 과 390 에서 섹션마다 스크린샷을 찍고 패널이 잘리는 곳, 겹치는 곳을 고쳤습니다.
PASS
인터랙션맨 아래에서 맨 위까지 1.5초에 거꾸로 올려도 섹션과 아잉 상태가 제자리로 돌아옵니다.
PASS
아잉 영상클립 11개, 시작·끝 포즈가 같아 전환에 튐이 없습니다. WebM 이 막히면 MOV, 그것도 막히면 WebP.
PASS
Three.js처음엔 상자로 만든 가구가 어색했습니다. 실제 가구 모델과 그림자로 바꿨습니다.
IMPROVED
성능3D(258KB) 는 첫 화면 뒤에 따로 받습니다. 대신 방이 0.5초 늦게 나타납니다.
TRADE-OFF
접근성키보드로 전부 이동되고, 움직임 줄이기를 켜면 영상과 카메라가 멈춥니다. Lighthouse 접근성 96 → 대비 수정.
PASS

지금 이 브라우저에서 잰 값

첫 큰 화면 (LCP)

—

화면 흔들림 (CLS)

0.000

눌렀을 때 반응 (INP)

—

초당 프레임

—

목표 LCP 2.0초 아래 · CLS 0.05 아래 · INP 150ms 아래 · 컴퓨터에서 60fps. 미치지 못하면 효과를 뺍니다.

Result

그래서 박상욱, 쓸 만했을까요?

만든 사람이 옆에 없어도 잘 돌아가면 제일 좋습니다.

화면

React · Next.js · RN

서버

Spring Boot · NestJS

배포

AWS · Docker · Actions

품질

Playwright 10회 연속 성공

운영

14개 언어 · 9개월

직접 써보고 팀에 공유

느리면 일단 기다리게 만들진 않습니다.어디에서 시간이 걸리는지부터 찾습니다.
한 번 누르는 기능도 두 번 눌러봅니다.연결이 끊기거나 중복 요청이 들어와도 괜찮은지 확인합니다.
같은 고생은 자동화에 넘깁니다.두 번 이상 반복되면 공통 코드나 검사로 바꿀 수 있는지 봅니다.
개발자 눈에만 보이면 부족합니다.운영하는 사람도 지금 무슨 일이 벌어지고 있는지 알 수 있게 만듭니다.

메일 보내기 GitHub @sangwookp9591이 사이트 소스 보기

박상욱 · sangwookp9591@gmail.com · ai-ng.co.kr · YouTube AI-NG
이 사이트: Next.js 16 · Bun · Three.js · GSAP · 아잉 영상은 Higgsfield(Kling 3.0) · 만든 건 Claude Fable 5.1

그래서 뭐 만들었냐고요?바로 보여드릴게요.