본문으로 건너뛰기
박정우프론트엔드 개발자

Web Developer 박정우 불편을 발견하고, 웹 서비스로 해결합니다.

사용자의 문제를 정의하고, 화면을 구현하고, 실제 사용 경험을 개선한 작업들을 소개합니다.

프로젝트 둘러보기GitHub (새 창)Contact

직접 겪은 불편에서 시작한 서비스

syu-likelion 화면 고르기
syu-likelion 지원서 상세의 점수 현황 탭. 왼쪽에는 모집 단계별 지원자 목록, 오른쪽에는 서류 보기·점수 매기기·점수 현황 탭과 리뷰어별 문항 점수, 코멘트가 있다.
  1. 1. 지원자 목록을 서류 지원자부터 최종 합격자까지 모집 단계별로 나눴습니다.
  2. 2. 지원자 한 명 안에서 서류 보기 · 점수 매기기 · 점수 현황만 바꿔 봅니다.
  3. 3. 총점이 같아도 어느 문항에서 갈렸는지 보이도록 문항별 점수를 함께 둡니다.
원본 크기로 보기 (새 창)
지원서 제출 완료 화면. 1차 합격 결과 발표일과 2차 면접 기간 안내, 지원서 수정과 지원 취소 버튼, 1차 합격 결과 발표 후에는 수정이 불가능하다는 안내가 있다.
  1. 1. 1차 결과 발표일과 면접 기간을 제출 완료 화면에 함께 적었습니다.
  2. 2. 발표 전까지는 지원서 수정과 지원 취소를 할 수 있습니다.
  3. 3. 수정이 불가능해지는 시점을 버튼 바로 아래에 안내합니다.
원본 크기로 보기 (새 창)
1차 모집 결과 발표 화면. 1차 합격 안내 아래 면접 시간 영역에서 달력으로 날짜를 고르고 20분 간격의 시간대를 선택한다.
  1. 1. 서류 합격 안내 바로 아래에서 면접 일정을 고릅니다.
  2. 2. 달력에서 날짜를 고르면 20분 간격의 시간대가 옆에 나타납니다.
원본 크기로 보기 (새 창)

삼육대학교 멋쟁이사자처럼 14기 홈페이지

syu-likelion

분산된 동아리 운영을 하나의 플랫폼으로

The Problem

홍보, 지원서, 면접 평가, 수업 자료, 공지가 모두 다른 곳에 흩어져 있어, 지원자도 동아리원도 필요한 정보를 찾느라 시간을 쓰고 있었습니다.

Impressive Issue

블라인드 서류 평가와 신원을 확인하는 면접 평가에 필요한 정보가 다르다는 피드백을 받아, 단계별로 보여주는 정보를 나눴습니다.

Result

모집부터 부원 운영까지 이 서비스로 진행했고, 동아리 부원들이 계속 사용하고 있습니다.

Frontend Developer · 2026.01 — 현재 · 운영 · 유지보수 중

Next.js · TypeScript · React · Axios

syu-likelion 작업 과정 읽기
서비스 (새 창)GitHub (새 창)Figma (새 창)

내가 구현한 화면

  1. 01로그인 · 인증 세션 연결, 학교 계정 가입과 직접 가입
  2. 02아이디 찾기 · 비밀번호 재설정과 로그인 후 환영창
  3. 03부스 스탬프 조회와 별자리 화면
  4. 04부스 지도의 선택 · 이동 경험 개선

팀원 · 백엔드가 맡은 부분

  • 부스 지도 · 시트 · 카드 최초 구현 (팀원)
  • 학교 신원 · 학생회비 · 입장 QR · 운영자 권한 판별 (백엔드)
  • 배포와 로그 수집
공개할 수 있는 실제 화면을 확보하기 전이라 담당 범위를 도식으로 보여줍니다. 확보할 화면: 부스 스탬프 별자리 화면. 받은 스탬프가 부스 분류에 따라 별자리에 표시된다. (샘플 계정)

삼육대학교 축제 홈페이지

Make A Wish

축제 당일, 가입부터 부스 찾기와 스탬프 완주까지 막힘 없이

The Problem

축제 홍보와 정보 공유를 원활하게 할 수단이 필요했고, 부스 관리, 학생·외부인 구분, 학생회비 납부 확인 같은 운영 작업도 함께 처리해야 했습니다.

Impressive Issue

특수문자, 코드 조각, 공격용 명령어 같은 악의적인 입력을 넣어 보는 공격적 QA를 여러 차례 진행하고, 입력 단계에서 걸러내는 처리를 넣었습니다.

축제 당일 활동 이용자(식별)
1,889
축제 당일 페이지 조회
48,347
스탬프 참여
278
스탬프 완주
106

팀 운영 결과입니다. 식별된 활동 이용자는 실제 참석 인원과 같지 않고, 본인 프론트엔드 작업의 효과를 뜻하지 않습니다.

Frontend Developer · 2026-10-06 축제 운영

React · TypeScript · TanStack Query · Zustand

Make A Wish 작업 과정 읽기
삼육대 어디야 검색 화면. 좌측에 장소 검색창과 건물·건물 내부 필터, 국제교육관의 층별 상세 정보가 있고, 우측 지도에는 교내 장소 마커와 선택한 장소의 InfoWindow가 표시되어 있다.
  1. 1. 장소명 · 별칭 · 건물과 층 · 설명을 모두 검색 대상으로 둡니다.
  2. 2. 건물을 찾는 경우와 건물 안 시설을 찾는 경우를 필터로 나눴습니다.
  3. 3. 건물 앞에 도착한 뒤에도 강의실을 찾도록 층별 정보를 함께 보여줍니다.
  4. 4. 결과를 고르면 지도 이동 · Marker · 상세 정보가 한 번에 바뀝니다.
원본 크기로 보기 (새 창)

삼육대학교 길찾기 서비스

삼육대 어디야

'장근청홀..?이 대체 어디야?'

The Problem

지도에 건물명은 뜨지만, 고유명사로 된 강의실 명을 보고 어느 건물에 있는지 찾는게 쉽지 않았습니다.

Impressive Issue

장소명 · 별칭 · 건물과 층 · 설명을 모두 검색 대상으로 두고, 일치 정도와 필드에 따라 결과 순서를 정했습니다.

장소 데이터 (건물 38 · 건물 안 시설 85)
123

Result

GitHub Pages에 배포하고 학교 커뮤니티에 소개했습니다.

기획 · 개발 · 배포 전 과정 · 2026.02 · 1인 프로젝트

TypeScript · Kakao Maps API · GitHub Pages

삼육대 어디야 작업 과정 읽기서비스 (새 창)GitHub (새 창)
Oshi Calendar 대시보드 화면. 종료 임박 일정과 오늘 할 일, 게임별 보상 현황이 한 화면에 모여 있다. 표시된 수치는 목업 데이터다.
  1. 1. 날짜로 일정을 찾는 캘린더는 좌측 레일에 남겼습니다.
  2. 2. 첫 자리는 종료 임박 일정입니다. D-3 · D-5처럼 남은 일수를 바로 보여줍니다.
  3. 3. 그 옆에 오늘 할 일을 둡니다.
  4. 4. 보상 현황도 같은 화면에서 확인합니다. 표시된 수치는 목업 데이터입니다.
원본 크기로 보기 (새 창)

서브컬처 게임 일정·보상 대시보드

Oshi Calendar

여러 게임에서 놓칠 일정과 보상을 한눈에

The Problem

여러 게임의 이벤트와 소식을 웹과 게임 안에서 각각 확인해야 해서 피곤했습니다.

Impressive Issue

실제 데이터를 연결해보니 난잡하다는 느낌을 받아 핵심 서비스를 캘린더 중심에서 보상·Todo 중심 대시보드로 바꿨습니다.

Result

현재 배포하여 이용할 수 있고, 홍보는 아직 하지 않았습니다.

Developer · 2026.06 — 현재 · 이용 가능 · 홍보 전

React · TypeScript · TanStack Query · Supabase

Oshi Calendar 작업 과정 읽기서비스 (새 창)Figma (새 창)

일하는 방식: AI-Driven QA & Workflow

AgentFlow

AI 작업자에게 역할을 나누고, 검토·독립 QA·문서화가 끝나야 완료되도록 관리하는 설치형 개발 도구

구조·규칙 설계 (코드는 AI 작성)

설계 의도
AI 협업에서 생길 수 있는 환각(Hallucination)과 검증 누락을 줄이기 위해 다중 검증 파이프라인을 구축했습니다.
핵심 원칙
작업과 검수 역할을 분리하고, 각 단계(기획·개발·QA·Wiki)마다 독립된 검수 승인을 거쳐야만 다음 단계로 이동합니다.
무결성 원칙
코드·파일이 바뀌면 이전 승인을 무효로 보고, 다시 검수를 통과해야 완료합니다.
운영 방식
검수는 AI가 자동으로 진행하고, 제 판단이 필요한 지점에서는 Master가 저에게 질문해 승인을 받습니다. 검수 기준은 언제든 추가할 수 있고, 최종 결과는 제가 직접 확인합니다.

적용

'Make A Wish' 프로젝트에 적용하여 Edge Case 입력 예외 처리와 기획-디자인 정합성을 검증했습니다.

AgentFlow 작업 과정 읽기

작업 하나가 완료되기까지

  1. Master가 역할 배정
  2. 기획 검토
  3. 개발 검토
  4. 독립 QA
  5. Wiki 검토
  6. 완료
예시 상태
규칙 설명용 예시

현재 후보후보 A

  1. 기획 검토후보 A 승인
  2. 개발 검토후보 A 승인
  3. 독립 QA후보 A 승인
  4. Wiki 검토후보 A 승인
  5. 완료완료할 수 있음

모든 승인이 현재 후보 A에 대한 것이라 완료할 수 있습니다. 파일이 바뀌면 다시 검수로 돌아갑니다.

현재 후보후보 B승인 뒤 파일이 바뀌어 새 후보가 되었습니다.

  1. 기획 검토후보 A 승인현재 후보와 달라 무효
  2. 개발 검토후보 A 승인현재 후보와 달라 무효
  3. 독립 QA후보 A 승인현재 후보와 달라 무효
  4. Wiki 검토후보 A 승인현재 후보와 달라 무효
  5. 완료완료하지 않음

승인 당시 후보 A와 현재 후보 B가 다릅니다. 이전 승인을 무효로 보고, 바뀐 후보로 다시 검수를 통과해야 완료합니다.

승인은 특정 내용에 대한 판단입니다. 이 예시는 규칙을 설명할 뿐 실제 검수를 실행하지 않습니다.

Communication

디자인과 컴퓨터공학 전공 배경을 바탕으로, 상대의 언어에 맞춰 기술을 설명하고 협업합니다.

동아리 부원에게 프론트엔드 개발을, 고등학생과 재수생에게 수학을 가르쳤습니다. 캄보디아와 베트남에서는 영어로 IT 수업을 진행했습니다.

프론트엔드 교육 인원
27
1:1 수학 지도 학생
8
두 나라에서 진행한 IT 교육 시간
160

  • 학생에게 설명할 때

    학생이 이해한 내용을 확인하고 설명 방식, 난이도, 진도와 수업 자료를 조정했습니다.

  • 디자이너와 화면을 만들 때

    화면의 의도를 컴포넌트와 상태로 옮기고, 예외 상황에서 어떻게 보여줄지 다시 확인했습니다.

  • 백엔드 개발자와 연동할 때

    필드의 의미와 응답 형태를 문서로 확인하고, 명세와 실제 응답이 다른 부분을 대조했습니다.

수업 자료를 만들려고 만든 도구

mathGraph

The Problem

수학 과외 문제를 직접 만들 때, 원하는 그래프를 교재와 비슷하게 그리는 방법이 없었습니다.

한 가지 판단

보조점의 실제 좌표와 표시 글자를 분리해, 숫자 위치에 3a 같은 라벨을 붙일 수 있게 했습니다.

Result

문제 제작 및 개념 전달 효율화를 위해 직접 개발하여 실제 수업 자료 제작에 적용했습니다.

서비스 (새 창)GitHub (새 창)
1234a3a
점은 실제 좌표 1과 3에 그대로 두고, 그 위의 표시 글자만 a · 3a로 바꿉니다. 판단을 설명하려고 만든 샘플 도식입니다.
교육 경험 전체 보기

Career

경력 · 수상 · 기술 전체 보기
  1. 2018선린인터넷고등학교 멀티미디어과 · 교내 웹 전공 동아리 개발자
  2. 2021삼육대학교 컴퓨터공학부
  3. 2022멋쟁이사자처럼 삼육대학교 10기
  4. 2023군 복무
  5. 2025멋쟁이사자처럼 삼육대학교 13기 · World Friends Korea — Cambodia · 삼육대학교 SW 프로젝트 경진대회 최우수상
  6. 2026멋쟁이사자처럼 삼육대학교 14기 Frontend 운영진 · World Friends Korea — Vietnam · syu-likelion · Make A Wish · 삼육대 어디야 · Oshi Calendar

그 밖의 프로젝트

전체 프로젝트 비교해 보기
  • CampusPolio프로젝트 아카이브흩어진 학생 프로젝트를 모아 포트폴리오로
  • 길맛로드길거리 푸드트럭 정보날마다 자리를 옮기는 푸드트럭 정보를 모으는 지도

그리고 CCTV 근무 자동 편성 · 세미콜론 · LA · ReadUp · 두사타 · Pret

Contact

프로젝트나 협업에 관한 이야기를 기다립니다.

joungou.park@gmail.comGitHub (새 창)