박상욱 · Sangwook Park · 2019–2026

화면을 만들다 보니
서버도 보고, 배포까지 하게 됐습니다.

14개 언어 서비스의 사용자 웹부터 백엔드 API, 운영 화면, 배포까지 9개월간 직접 만들고 운영했습니다.

처음에는 화면을 만드는 일이 중심이었습니다. 그런데 실제 서비스에서 생기는 문제를 따라가다 보니 API, 데이터베이스, 배포까지 함께 보게 됐습니다. 화면 오류로 시작했더라도 원인이 API나 데이터에 있으면 끝까지 확인해 바로잡았습니다.

  • 화면만 만들고 끝내지 않았습니다필요하면 서버 API와 데이터베이스, 배포 로그까지 직접 확인하고 수정했습니다.
  • 예외 상황을 먼저 확인합니다버튼을 연속으로 누르거나 통신이 끊겼을 때도 오류 화면에 갇히지 않도록 처리했습니다.
  • 새 도구는 직접 써보고 공유합니다새 AI 모델이나 개발 도구가 나오면 작은 기능에 먼저 써보고, 쓸 만한 것은 사용법과 주의점을 정리해 팀에 공유했습니다.
GitHub

박상욱 · 화면부터 서버, 배포까지 직접 만드는 개발자

경력 요약

화면에서 시작했지만, 문제는 화면에서만 끝나지 않았습니다.

소규모 팀에서 서비스를 만들다 보니 화면만 보고 있을 수 없었습니다. API를 고치고, 데이터베이스를 손보고, 배포 환경을 세우면서 자연스럽게 필요한 작업을 하나씩 해결해왔습니다.

  1. 2019–2022
    ㈜아와소프트
    공공·기업 관제 시스템 · 실시간 도로 영상 관제 및 AI 결과 검증 화면 개발
    AI 결과를 사람이 검증하는 관제 화면 도로 영상 분석 결과를 자동으로 반영하지 않고, 관제 담당자가 직접 확인하고 승인할 수 있는 검증 화면을 구축했습니다.
    실시간 관제AI 검증
  2. 2022–2023
    ㈜데브락
    2인 개발 팀 · 맛집 숏폼 앱 전체 개발 · 점주용 관리 사이트 · 영상 인코딩 파이프라인 구축
    영상 파이프라인의 단계별 병목 점검 영상 재생이 지연될 때 촬영, 업로드, 인코딩, CDN 배포, 플레이어 재생 구간을 나눠 문제의 시작점을 찾았습니다.
    모바일 앱영상 스트리밍
  3. 2024–2025
    애자일그로스㈜
    2~3인 팀 · 웹 화면부터 서버 API, AWS 인프라 구축 및 자동 배포까지 전 과정 담당
    화면부터 서버, 클라우드 배포까지 통합 구축 2~3인 팀에서 웹 화면부터 백엔드 API, AWS 인프라와 CI/CD 파이프라인을 통째로 구축해 서비스를 런칭했습니다.
    웹 프론트백엔드 APIAWS
  4. 2025–2026
    ZIVO
    14개 언어 지원 이용자 웹 · 157개 운영 화면 공통 기반 구축 · 검색 및 결제 서버 API 개발
    글로벌 웹백오피스서버

스크롤하면 연도별 주요 이력을 확인할 수 있습니다.

주요 프로젝트 · ZIVO

ZIVO에서는 사용자 웹부터 운영자 화면, 서버 API까지 함께 만들었습니다.

해외 사용자가 쓰는 웹 서비스를 기획 단계부터 9개월간 운영했습니다. 운영팀에 필요한 관리자 화면 157개를 만들었고, 결제와 검색, 주문 등 서버 기능도 함께 구현했습니다. 병원, 숙소, 교통, eSIM, 식당 QR 주문까지 실제 서비스 흐름에 맞춰 개발했습니다.

0 14
지원 언어
0 440
웹 코드 반영(PR)
0 157
운영 화면
0회 10회
결제 테스트 연속 성공

화면 문제를 따라가다 서버까지 갔습니다. 내 담당 영역만 나누기보다, 사용자가 막히는 지점을 따라가며 필요한 곳을 끝까지 고쳤습니다.

품질 관리 · 불안정한 테스트 개선

같은 테스트인데 왜 결과가 매번 다를까?

결제 기능 자체는 정상이었지만 자동 E2E 테스트는 10번 중 3번꼴로 실패했습니다. 대기 시간을 단순히 늘리는 대신 근본적인 원인을 찾아 반복 실행해도 항상 같은 결과가 나오도록 수정했습니다. (Playwright E2E)

$ bun test e2e/payment✓ 장바구니 담기✓ 주문서 이동✗ 결제 버튼 클릭 … timeout 30s1 failed, 2 passed (flaky 3/10)
  1. 문제 · 실행할 때마다 결과가 달라지는 테스트
    결제 테스트가 가끔 시간 초과로 실패해 자동 배포 파이프라인에 포함하기 어려웠습니다.
  2. 원인 · 결제 로직이 아닌 클릭 타이밍 문제
    실행 로그를 추적한 결과, 결제 버튼이 완전히 활성화되기 전에 클릭 이벤트가 먼저 발생한 것이 원인이었습니다.
  3. 해결 · 버튼 준비 완료 신호를 확인 후 클릭
    임의의 대기 시간을 주는 대신, 버튼이 활성화된 상태를 명시적으로 확인한 뒤 클릭하도록 테스트 코드를 수정했습니다.
  4. 결과 · 10회 연속 실행 모두 성공
    원인을 제거한 후 반복 실행해도 흔들림 없이 동일한 성공 결과를 확인했습니다.

만든 것 · 이용자용 웹

앱 설치 없이 웹에서 검색, 예약, 결제까지 이어집니다.

해외 사용자가 별도 앱을 설치하지 않아도 구글 검색에서 바로 들어와 병원이나 숙소를 예약하고 결제할 수 있는 웹 서비스입니다.

  • 검색 유입 시 바로 해당 언어로 연결구글 검색에 14개 언어 페이지가 각각 등록되도록 주소 체계(/ko, /en)를 분리했습니다.
  • 앱 설치 없이 한 번에 결제까지장소 검색부터 QR 주문, 장바구니, 결제까지 여러 화면을 거치지 않고 하나의 웹 흐름으로 묶었습니다.
  • 실패해도 길을 잃지 않게결제가 취소되거나 품절 상품을 선택해도 화면이 멈추지 않고, 사용자가 이전 단계로 안전하게 돌아갈 수 있도록 예외 흐름을 정리했습니다.
실제 웹 화면 열어보기 ↗

AI 도구 활용

새로운 AI 도구가 나오면 소개 글만 보는 대신 직접 작은 기능부터 써봤습니다.

새로운 AI 모델이나 개발 도구가 나오면 직접 결제해서 작은 기능부터 써보고, 실제 업무 흐름에서 유용한지 확인했습니다.

  • 새로운 개발 도구 직접 테스트

    새로운 CLI나 개발 도구가 나오면 실제 프로젝트의 작은 기능부터 적용해 장단점을 파악했습니다.

  • 동일한 작업으로 모델 성능 비교

    Claude, GPT, Gemini 등에 같은 코드 작성과 데이터 처리 작업을 맡겨보고 모델별 강점과 한계를 비교했습니다.

  • 실행 검증을 통한 신뢰성 확인

    AI가 생성한 코드는 브라우저와 테스트 환경에서 직접 실행해 오류를 확인하고, 필요한 수정을 거친 뒤 적용했습니다.

  • 검증된 도구와 주의점 팀 내 공유

    실제로 작업 효율이 검증된 도구는 구체적인 활용법과 주의해야 할 한계를 문서로 정리해 팀원들과 공유했습니다.

작은 기능 적용모델 간 비교실행 검증팀 내 공유

이 포트폴리오 웹사이트 제작 과정Claude Fable 5.1 모델로 코드를 작성하고, 아잉 마스코트 영상은 Higgsfield를 활용했습니다. 생성된 결과물은 브라우저에서 직접 조작하며 인터랙션과 반응 속도를 지속적으로 다듬었습니다.

이 사이트 자체 점검

코드만 보고 끝내지 않고, 실제 브라우저에서 직접 열어보고 확인했습니다.

화면을 직접 열어보고 다양한 기기와 네트워크 환경에서 테스트하며, 어색하거나 지연이 발생하는 부분을 수정했습니다.

  • 코드 구조PASS
    state, timeline, mascot, scene 모듈로 분리하고, 화면 연출은 스크롤 위치 기반 순수 함수로 구성했습니다.
  • 화면 대응PASS
    데스크톱(1440px)과 모바일(390px) 환경에서 섹션별 레이아웃 겹침과 글자 잘림 현상을 점검하고 수정했습니다.
  • 스크롤 조작PASS
    스크롤을 빠르게 왕복해도 애니메이션 상태와 카메라 좌표가 어긋나지 않고 제자리로 복귀하도록 처리했습니다.
  • 캐릭터 영상PASS
    11개 영상 클립의 시작과 끝 프레임을 맞춰 전환 시 끊김을 없앴고, 브라우저 환경에 따라 WebM, MOV, WebP 순으로 재생합니다.
  • 3D 공간IMPROVED
    단순 박스 형태의 임시 모델을 실제 가구 모델과 그림자 효과로 교체해 자연스러운 실내 공간을 연출했습니다.
  • 성능 최적화TRADE-OFF
    초기 화면의 빠른 표시를 위해 3D 모델(258KB)은 첫 렌더링 이후 비동기로 로드하도록 분리했습니다.
  • 웹 접근성PASS
    키보드 Tab 키만으로 모든 콘텐츠 탐색이 가능하며, 움직임 줄이기(prefers-reduced-motion) 설정을 지원합니다.

지금 이 브라우저에서 잰 값

첫 큰 화면 (LCP)
—
화면 흔들림 (CLS)
0.000
눌렀을 때 반응 (INP)
—
초당 프레임
—

성능 기준 첫 화면 2.0초 이내 · 레이아웃 흔들림 0.05 이내 · 클릭 반응 150ms 이내 · 60fps 유지. 기준에 미치지 못하는 화려한 효과는 과감히 제외했습니다.

마무리

문제를 따라가다 보면 화면에서 시작해 서버와 배포까지 보게 됩니다. 그게 제가 일해온 방식입니다.

만든 사람이 자리를 비워도 안정적으로 유지되는 서비스를 만드는 것이 목표입니다.

화면
React · Next.js · RN
서버
Spring Boot · NestJS
배포
AWS · Docker · Actions
품질
Playwright 10회 연속 성공
운영
14개 언어 · 9개월
AI
직접 써보고 팀에 공유
  • 로딩이 길어지면 원인부터 추적합니다사용자를 무작정 기다리게 하지 않고, 네트워크 통신과 렌더링 중 어디서 병목이 발생하는지 먼저 확인합니다.
  • 한 번 누르는 버튼도 빠르게 여러 번 눌러봅니다네트워크가 지연되거나 사용자가 중복 클릭했을 때 같은 요청이 두 번 처리되지 않는지 검증합니다.
  • 반복되는 작업은 자동화로 전환합니다사람이 수동으로 확인하던 작업을 테스트 코드나 공통 스크립트로 바꿔 실수를 줄였습니다.
  • 운영자 관점의 상태 확인 기능을 둡니다개발자만 로그를 보는 것이 아니라, 운영팀도 현재 처리 상태와 오류 원인을 바로 파악할 수 있는 화면을 만듭니다.
메일 보내기GitHub
포트폴리오 소스 코드

박상욱 · sangwookp9591@gmail.com · ai-ng.co.kr · YouTube AI-NG
이 웹사이트는 Next.js 16, Three.js, GSAP을 활용해 제작되었으며, 마스코트 영상은 Higgsfield를 활용했습니다.