C GitHub (새 탭)

CHOI CHANGHYEON

최창현

사용하기 편한 서비스를
만드는 개발자입니다.

웹 서비스부터 서버·데이터 연동과 업무 자동화까지,
직접 구현한 경험을 소개합니다.

실무 경험 보기 이메일
  • 1년 11개월 회사 경력
  • 3건 외주 개발
  • 1개 운영 중인 서비스

SELECTED EXPERIENCE / 01—04

실무에서 만든 경험

회사와 외주에서 맡은 일들을 소개합니다.

  1. 회사 경력

    2024.08 — 2026.061년 11개월

    모어다임 · 연구소 개발팀

    프론트엔드 개발

    CARE 의료 병동 모니터링 시스템

    실시간 데이터 갱신

    WebSocket으로 받은 초기 전체 데이터(snapshot)를 관제 화면에 표시하고, 이후 변경 데이터(delta)를 반영해 화면을 갱신했습니다.

    프론트엔드
    • React
    • TypeScript
    • Axios
    • WebSocket
    스타일링
    • MUI
    • styled-components
    상태 관리
    • TanStack Query
    • Zustand
    빌드·배포
    • Vite
    세부 담당 업무
    • React·TypeScript 기반 의료 병동 모니터링 프론트엔드 개발 및 유지보수
    • TanStack Query·Axios 기반 API 연동 및 의료 데이터 타입·예외 처리 개선
    • Dashboard, Actingboard, Tableboard 등 실시간 병동 관제 화면 개발
    • 환자·침상 배정, 환자 상세, 장치 연결 상태 및 알림 표시 기능 구현
    • HBM, Fluid, Alert, I-Nurse, Surgery 리포트 화면 개발 및 개선
    • 장치 등록·관리, IoT 매핑, 병상 설정, 카메라 설정, EPD 설정 등 관리자 화면 개발

    REALTIME MONITORING

    하나의 흐름, 세 가지 화면
    담당 기능을 설명한 개념도
  1. 외주 개발

    2026.06 — 2026.07

    고객사 (주)제이에이 솔루션

    단독 개발 · 배포

    고객지원 서비스

    복합기 고객지원 웹페이지 및 관리자 페이지 개발

    복합기 모델별 드라이버·영상 안내와 관리자용 자료·통계 기능을 단독 개발·배포했습니다.

    프론트엔드
    • Next.js
    • TypeScript
    스타일링
    • Tailwind CSS
    • shadcn/ui
    데이터·스토리지
    • Supabase
    • Supabase Storage
    • PostgreSQL
    빌드·배포
    • Netlify
    구현 내용
    • Next.js·TypeScript 기반 복합기 모델별 드라이버·영상 가이드 제공 페이지 개발
    • 자료·영상 관리 및 다운로드 통계 조회를 위한 관리자 페이지 개발
    • Tailwind CSS·shadcn/ui 기반 고객용·관리자 반응형 화면 구성
    • Supabase Auth 기반 관리자 로그인, Supabase Storage·PostgreSQL 자료 관리 및 Netlify 배포

    CUSTOMER RESOURCES

    필요한 자료를 한곳에서
    담당 기능을 설명한 개념도
  2. 외주 개발

    2025.08

    고객사 (주)제이에이 솔루션

    단독 개발 · 서버 구축

    알림·업무 자동화

    고객 알림 및 A/S 고객 명단 자동화 구축

    고객 알림·명단 정리를 자동화하고 Node.js·Express 서버를 구축했습니다.

    백엔드·자동화
    • Node.js
    • Express
    • Google Apps Script
    • monday.com
    • Webhook
    데이터·스토리지
    • Google Sheets
    빌드·배포
    • 카페24
    구현 내용
    • monday.com 상태 변경 웹훅을 활용한 고객 문자·카카오톡 발송 자동화
    • Google Apps Script를 활용한 A/S·서비스 고객 명단의 Google Sheets 정리 자동화
    • 카페24 호스팅에 Node.js·Express 서버 구축

    CONNECTED WORKFLOWS

    반복되는 일을 연결하다
    담당 기능을 설명한 개념도
  3. 외주 개발

    2025.03

    고객사 (주)제이에이 솔루션

    단독 개발 · 배포

    사내 수리 이력 공유

    CS 부서 수리 이력 공유 웹페이지 개발

    장비 수리 내역·사진·영상 공유와 직원 댓글 기능을 갖춘 사내 웹페이지를 개발·배포했습니다.

    프론트엔드
    • React
    빌드·배포
    • Cloudflare
    구현 내용
    • React 기반 장비 수리 내역·사진·영상 공유 및 직원 댓글 기능 구현
    • Cloudflare를 활용한 웹페이지 배포

    SHARED KNOWLEDGE

    기록에 맥락을 더하다
    담당 기능을 설명한 개념도

TECH STACK

사용하는 기술

웹 개발에 사용하는 기술과 도구입니다.

FRONTEND

프론트엔드

  • React
  • TypeScript
  • Next.js
  • Axios
  • WebSocket

STYLING

스타일링

  • CSS
  • Tailwind CSS
  • styled-components
  • MUI
  • shadcn/ui

STATE MANAGEMENT

상태 관리

  • TanStack Query
  • Zustand
  • Redux

BACKEND & AUTOMATION

백엔드·자동화

  • Node.js
  • Express
  • NestJS
  • Google Apps Script

DATA & STORAGE

데이터·스토리지

  • Supabase
  • PostgreSQL
  • Prisma
  • PostGIS
  • MongoDB
  • TypeORM

BUILD & DEPLOYMENT

빌드·배포

  • Vite
  • Vercel
  • Netlify
  • Cloudflare
  • Docker Compose
  • Nginx
  • GitHub Actions

MAIN PROJECTS

메인 프로젝트

혼자 기획하고 만든 개인 프로젝트입니다. 강아지 산책은 운영 중이고, 아래 두 개는 지금 만들고 있습니다.

강아지 산책 서비스의 주변 산책 친구 지도 화면
산책 요청 상대와 나누는 실시간 채팅 화면 반려견별 산책 일기 목록 화면 로그인 뒤 홈 화면
운영 중

강아지 산책

동네 반려인과 산책 친구를 이어 주는 서비스입니다. 지도에서 1km 안의 이웃을 찾아 산책을 요청하고, 수락되면 실시간으로 대화합니다.

기획·디자인·개발부터 집 데스크톱 서버 배포와 운영까지 혼자 진행했습니다.

서비스 보기 (새 탭) GitHub (새 탭)

로그인 화면의 ‘가입 없이 둘러보기’로 데모 계정에 바로 들어가 볼 수 있습니다. 데모는 방문자 모두가 함께 쓰는 공용 계정이라 일기도 공유되며, 사진 업로드는 막혀 있습니다.

프론트엔드
  • Next.js
  • React
  • TypeScript
  • Kakao 지도
상태 관리
  • TanStack Query
  • Zustand
스타일링
  • CSS Modules
백엔드
  • NestJS
  • Prisma
  • Socket.IO
  • JWT
데이터
  • PostgreSQL
  • PostGIS
빌드·배포
  • Docker Compose
  • nginx
  • Let's Encrypt
테스트
  • Vitest
  • Playwright
주요 기능
  • 주변 산책 친구: 위치 공개에 동의하고 최근 5분 안에 위치를 보낸 1km 안의 이웃을 지도와 목록으로 표시합니다. 데모 지도는 미리 저장한 위치를 써서 5분 제한이 없습니다.
  • 산책 요청: 이웃과 반려견 정보를 보고 요청하면 받은 사람이 실시간 알림을 받고 수락하거나 거절합니다.
  • 채팅: 수락된 요청의 두 사람만 Socket.IO로 대화하고, 다시 연결되면 최근 50개 메시지를 다시 불러옵니다.
  • 산책 일기: 반려견별로 사진(최대 5장)과 글을 남기는 기록입니다. 일반 계정은 나만 볼 수 있고, 데모 계정은 공용입니다.
  • 게시판: 이웃과 글·댓글을 공유합니다.
신경 쓴 점
  • 동시성: 같은 두 사람의 대기 중인 산책 요청을 DB 부분 유니크 인덱스로 하나만 허용하고, 반려견 삭제·사진 교체는 행 잠금으로 순서를 보장합니다.
  • 개인정보: 위치를 약 200m 단위로 흐려 저장하고, 사진의 촬영 위치 메타데이터를 제거합니다. 일기 사진은 인증된 API로만 제공합니다.
  • 인증: 접속 토큰은 메모리에만, 리프레시 토큰은 HttpOnly·SameSite=Strict 쿠키에 담고 DB에는 해시만 저장합니다. IP별 로그인 시도를 제한합니다.
  • 배포: 집 데스크톱(Ubuntu Server)에 Docker Compose로 nginx·web·api·db를 띄우고 HTTPS를 적용했습니다. 부팅 때 USB 백업과 데모 데이터 초기화를 실행합니다.
기능 흐름 따라가기에서 1단계 화면 코드와 근거 줄을 함께 보는 화면
README 소개와 화면·요청·서버 구성을 보여 주는 한눈에 보기 화면 폴더 상자와 import 연결 화살표로 표시한 프로젝트 지도 화면 파일 트리와 선택한 함수의 코드를 강조한 코드 읽기 화면
개발 중

Code Learning

처음 보는 TypeScript, JavaScript 프로젝트를 읽기 쉽게 도와주는 데스크톱 앱입니다. 버튼 하나를 누르면 서버와 DB에서 무슨 일이 일어나는지, 실제 코드를 따라가며 보여 줍니다.

기획부터 개발까지 혼자 하고 있습니다. 지금은 macOS용 첫 버전을 준비 중입니다.

GitHub (새 탭)

2026년 10월 시작. 아직 내려받을 수 있는 설치 파일은 없습니다. 화면은 공개 프로젝트 shadcn-ui/taxonomy를 열어 찍었습니다.

데스크톱 앱
  • Electron
  • Electron Forge
프론트엔드
  • React
  • TypeScript
  • CodeMirror
  • React Flow
상태 관리
  • Zustand
코드 분석
  • tree-sitter
  • TypeScript API
테스트·CI
  • Vitest
  • Playwright
  • GitHub Actions
주요 기능
  • 기능 흐름 따라가기: 화면에서 시작해 요청, 서버, DB까지 기능 하나를 단계별로 따라갑니다. 단계마다 근거가 된 코드 줄을 함께 보여 주고, 코드에서 찾지 못한 단계는 건너뜁니다.
  • 프로젝트 지도: 어떤 화면이 어떤 서버 기능을 부르는지, 어떤 파일이 어떤 파일을 가져다 쓰는지 그림으로 봅니다.
  • 코드 읽기: 함수가 어디서 불리고 무엇을 부르는지, 값이 어디서 와서 어디로 가는지 따라갑니다.
  • 검토 도우미: 아무 데서도 안 쓰는 것 같은 파일이나 너무 긴 함수를 짚어 주고, 커밋해 둔 코드와 지금 코드를 나란히 비교합니다.
  • AI 설명: 모르는 함수를 AI에게 물어보거나, 기획 문서와 실제 코드가 맞는지 비교해 볼 수 있습니다.
신경 쓴 점
  • 읽기 전용: 열어 본 프로젝트의 파일을 고치지 않고, 그 안의 코드나 스크립트도 실행하지 않습니다.
  • 근거 표시: 흐름의 각 단계에 근거가 된 코드 줄을 붙이고, 확실하지 않은 연결은 ‘추정’이라고 따로 표시합니다.
  • AI는 필요할 때만: AI 없이도 탐색, 흐름, 지도는 모두 동작합니다. AI를 쓸 때는 무엇을 어느 AI로 보내는지 먼저 알리고, 동의해야 보냅니다. AI에게 답을 요청할 때는 그 프로그램을 macOS 접근 제한 장치(sandbox-exec) 안에서 돌립니다.
검수 화면 디자인 시안: 왼쪽 화면 목록, 가운데 수정 요청 번호가 찍힌 쇼핑몰 화면 사진, 오른쪽 요청 목록
디자인 시안입니다. 이미지 생성 도구로 만들었고, 그림 속 쇼핑몰은 예시로 지어낸 가게입니다.
개발 중

Client Review

외주 작업의 수정 요청을 주고받는 검수 서비스입니다. 개발자가 화면 사진을 버전별로 올리면, 클라이언트가 사진 위 고칠 자리를 찍어 요청을 남기고, 고친 결과를 확인한 뒤 승인합니다.

“메인 화면 위쪽 배너 있잖아요…” 같은 말 대신, 사진에서 그 자리를 바로 찍어 말할 수 있게 만들고 있습니다.

GitHub (새 탭)

2026년 10월 시작. 아직 배포 전이라 써 볼 수 있는 주소는 없습니다.

프론트엔드
  • React
  • Vite
  • TypeScript
  • React Router
스타일링
  • CSS Modules
백엔드
  • NestJS
  • Prisma
데이터
  • PostgreSQL
빌드·배포
  • Docker Compose
  • nginx
테스트
  • Vitest
  • Supertest
  • Testing Library
지금까지 만든 것
  • 실행 환경: Docker Compose로 nginx, API 서버, DB를 한 번에 띄웁니다. 화면과 API를 같은 주소로 묶어서 CORS 설정이 필요 없습니다.
  • 이메일 코드 로그인: 비밀번호 대신 6자리 코드로 로그인합니다. 코드는 10분 뒤 만료되고, 한 코드로 5번까지만 맞혀 볼 수 있습니다. 메일 발송은 아직 붙이지 않았습니다.
  • 동시 요청: 같은 코드가 동시에 두 번 들어와도 세션은 하나만 생깁니다. 조건을 건 UPDATE 한 문장으로 막았습니다.
  • 보안: 쿠키는 SameSite=Lax로 두고, 쓰기 요청마다 Origin을 확인합니다. 세션 토큰은 DB에 해시로만 저장합니다.
  • 디자인: 시안 색을 그대로 쓰면 흐린 글자와 입력칸 테두리가 잘 안 보여서, 대비 기준을 넘는 색으로 바꿔 적용했습니다.
계획한 기능
  • 버전 게시: PC, 모바일 화면 사진을 1차, 2차 버전으로 올립니다.
  • 핀 쪽지: 사진 위를 눌러 그 자리에 수정 요청을 남깁니다. 위치를 비율로 저장해서 휴대폰으로 봐도 같은 자리에 핀이 찍힙니다.
  • 확인과 승인: 개발자가 고친 화면을 올리면 클라이언트가 처음 사진과 나란히 비교합니다. 범위 안의 요청이 모두 끝나면 승인자가 버전을 승인합니다.
  • 알림: 누가 언제 무엇을 했는지 기록하고, 새 버전이나 승인 소식을 메일로 보냅니다.

LET’S TALK

이야기를 나누고 싶다면

ckdgus1308@naver.com
GitHub (새 탭)