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

프로젝트

Featured Projects

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 (새 창)

Additional Projects

개발 방식, 개발 중인 서비스, 교육 도구처럼 성격이 다른 작업입니다.

  • AI WorkFlow

    AgentFlow

    승인 · 독립 QA · Wiki 보존을 코드로 관리하는 개발 도구

    나의 역할

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

    프로젝트 소개

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

    확인된 결과

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

    AgentFlow 작업 과정 읽기
  • 프로젝트 아카이브

    CampusPolio

    흩어진 학생 프로젝트를 모아 포트폴리오로

    나의 역할

    Frontend 대부분 · 디자인 전반 (멘토링 지원)

    프로젝트 소개

    삼육대학교 학생의 프로젝트를 올리고 묶어서 포트폴리오로 구성하는 웹 서비스

    확인된 결과

    개발 중이며 아직 공개하지 않았습니다. UI 전면 개선을 진행하고 있습니다.

    GitHub (새 창)
  • 수학 문제용 그래프 제작 도구

    mathGraph

    과외 문제에 넣을 그래프를 직접 그리는 도구

    나의 역할

    1인 개발 (AI 코드 작성 · 직접 검증)

    프로젝트 소개

    수식을 입력해 교재와 비슷한 그래프를 만들고 SVG·PNG로 내보내는 그래프 제작 도구

    확인된 결과

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

    서비스 (새 창)GitHub (새 창)
  • 길거리 푸드트럭 정보

    길맛로드

    날마다 자리를 옮기는 푸드트럭 정보를 모으는 지도

    나의 역할

    Frontend · UI 디자인

    프로젝트 소개

    길거리 푸드트럭 정보를 모으고, 사용자 제보를 관리자가 승인해 보여주는 사이트

    확인된 결과

    삼육대학교 SW 프로젝트 경진대회 최우수상(2025). 시연용으로 배포했고 지금은 종료했습니다.

    GitHub (새 창)

그 밖의 프로젝트

기타 프로젝트 펼쳐보기6

  • CCTV 근무 자동 편성

    복잡한 근무 규칙과 인원별 조건을 반영하는 폐쇄망 근무 편성 도구

    인터넷도 라이브러리도 IDE도 없는 환경에서 만든 근무 자동화

    기획 · 개발

    작업 과정 읽기

  • 세미콜론컴퓨터공학부 학회 페이지

    학회 소개와 내부 운영을 한 페이지에서 다루는 학회 사이트

    학회 소개 · 학회비 납부자 체크 · 회의록 작성

    Frontend · Design · Backend

    사이트 (새 창)

  • LA

    지역별 축제 · 행사 정보를 모아 AI 요약과 함께 보여주는 서비스

    지역별 축제 · 행사 정보 수집 · AI 요약 · 코멘트 · AI 채팅

    Frontend · Design

    GitHub (새 창)

  • ReadUp

    기사를 직접 요약해 보고 AI에게 채점받는 독해력 향상 서비스

    기사 읽고 직접 요약 · AI 채점 · 피드백

    Frontend · Design

    GitHub (새 창)

  • 두사타두유는 사랑을 타고

    동아리 박람회에서 선보인, 웹과 오프라인을 잇는 작품

    자기를 어필하는 한두 문장을 포스트잇으로 게시 · 마음에 든 포스트잇을 가져가 뒷면 연락처로 연락

    Frontend · Design

    GitHub (새 창)

  • Pret

    텍스트와 아스키 아트만으로 화면을 구성한 웹 RPG

    Pretext 라이브러리 기반 화면 디자인 · 웹에서 진행하는 RPG

    Frontend

    사이트 (새 창)

Contact

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

joungou.park@gmail.comGitHub (새 창)