웹 서비스 · 2026
프리랜서 개발자 홈페이지와 프로젝트 CMS
사례를 한 번 쓰면 한국어와 영어 사이트에 함께 올라가는 포트폴리오
완료한 프로젝트를 직접 정리해 한국어와 영어 사이트에 함께 공개하고, 들어온 문의를 한곳에서 확인할 수 있도록 홈페이지와 작은 관리 도구를 하나로 만들었습니다.
- 고객
- 비공개 고객
- 분야
- 웹 서비스
- 프로젝트 사이트
- 프로젝트 사이트 ↗
개요
- 프리랜서 개발자의 홈페이지와 프로젝트 사례 관리 도구를 하나로 구성
- 방문자 동선: 맡길 수 있는 일 확인 → 사례 열람 → 문의
- 운영자는 사이트에 붙은 관리 화면에서 사례를 직접 작성·수정
- 사례 하나를 등록하면 목록 카드, 상세 페이지, 검색 엔진에 넘길 정보까지 함께 생성
- 한국어·영어 동시 운영, 영어 본문이 없는 사례는 영어 쪽에 미노출
과제
- 문서 파일이나 외부 서비스에 사례를 두면 추가할 때마다 형식을 다시 맞춰야 함
- 영어 페이지를 따로 관리하면 두 언어의 내용이 어긋남
- 외부 양식 서비스로 문의를 받으면 연락처와 상담 내용이 사이트 밖에 축적
- 받은 문의를 기한 없이 보관할 이유 없음
- 아무 페이지나 만들 수 있는 범용 관리 도구는 1인 운영 사이트에 과함
해결 방법
- 관리 기능을 프로젝트 사례 중심으로 한정: 사례 작성, 이미지 업로드, 분야·기술·태그 정리, 문의 확인
- 본문을 개요·문제·해결·구현·결과 구간으로 고정
- 구간 안에서 쓰는 요소는 문단, 소제목, 목록, 이미지, 코드 다섯 가지로 제한 → 사례마다 동일한 구성
- 한국어·영어 입력란을 한 화면에 나란히 배치해 번역문을 바로 옆에서 작성
- 공개 시 두 언어의 목록과 상세를 함께 생성, 분야별 필터 제공
- 영어 제목과 요약이 없는 사례는 영어 목록에서 제외
시스템 구조
- 방문자 흐름: 홈에서 서비스 범위 확인 → 프로젝트 목록 분야 필터 → 사례 상세 → 문의 작성
- 운영자 흐름: 로그인 → 사례 작성과 이미지 업로드 → 초안 상태로 검토 → 공개 전환 → 문의 확인
- 작업 중 사례는 초안으로 두어 사이트에 미노출, 공개 전환 시점부터 두 언어 목록에 반영
구현
- 주소가 언어를 결정: 한국어는 접두사 없는 주소, 영어는
/en으로 시작하는 주소 - 번역이 없는 페이지에서 언어 전환 시 해당 언어에 존재하는 가장 가까운 페이지로 이동
- 문의는 사이트 안에 저장, 신규 접수 시 메신저로 알림
- 알림에는 이름·연락처·문의 내용을 제외하고 관리 화면 링크만 포함 → 개인정보의 사이트 외부 반출 차단
- 접수 1년 경과 문의는 자동 삭제
- 이미지는 브라우저에서 저장소로 직접 업로드, 확정 시점에 서버가 크기와 형식을 재확인
- 가입 화면 없음, 계정은 서버에서 명령으로만 생성, 로그인 실패 누적 시 계정 잠금
- 완료한 프로젝트 폴더에서 사례 초안을 만들어 올리는 명령 도구를 함께 제작, 업로드된 사례는 초안으로 접수 후 검토를 거쳐 공개
결과
- 한 번 정리한 사례가 한국어·영어 사이트에 동시 공개, 분야별 필터로 열람 가능
- 새 프로젝트가 끝날 때마다 관리 화면에서 직접 추가
- 문의는 사이트 내부에 축적, 연락처와 상담 내용은 외부 반출 없음, 보관 기간 경과 후 삭제
- 직접 운영하는 서버에서 가동 중, 방문 기록도 같은 서버에서 확인
사용 기술
- Next.js
- React
- TypeScript
- FastAPI
- Python
- PostgreSQL
- Docker
화면
해결이 필요한 문제가 있으신가요?
소프트웨어 개발부터 장비 연동과 엔지니어링까지, 프로젝트의 요구사항에 적합한 해결 방안을 함께 검토합니다.
프로젝트 문의하기