Colophon
사이트 소개 .
이 웹사이트가 어떻게 만들어졌는지 설명합니다.
어떻게 만들어졌나
기존 Django 블로그
devprofessional.xyz (운영 종료)
Claude Code (Anthropic)
AI-Augmented Development
Now
현재 포트폴리오+블로그
지금 이 사이트
기존 블로그의 데이터베이스·콘텐츠 구조를 그대로 가져오고,
Claude Code와 함께 디자인 시안을 직접 생성하고 코드로 구현했습니다.
단순 블로그에서 레이더 차트 기반 Overview, RAG 챗봇, 접근코드 기반 자료실,
웹 기반 콘텐츠 편집 UI 등이 더해졌습니다.
이후 Vercel + Neon(PostgreSQL) + Cloudinary 스택으로 실제 배포를 완료했으며,
RAG 챗봇의 자동 동기화·할루시네이션 방지, 자료별 개별 비밀번호 관리 등을 지속적으로 개선하고 있습니다.
최근에는 Overview 페이지 하단에 Featured Projects 섹션을 추가해 청약 대시보드·Gmail 자동화·AI 영상 제작 등
AI 실무 교육 프로젝트 3종을 SVG 아키텍처 도식과 함께 포트폴리오 포스트로 게시했습니다.
만든 목적
컴퓨터공학·경영학 복수전공 및 Business Analytics 트랙 이수 경험을 바탕으로, 개인 이력과 프로젝트를 체계적으로 보여주는 포트폴리오 사이트이자 개발·데이터·AI·마케팅 분야의 글을 기록하는 블로그입니다. 기술과 비즈니스를 연결하는 융합형 역량을 방문자에게 효과적으로 전달하는 것이 목표입니다.
기술 스택
Backend
Python 3.12
Django 6.0
Whitenoise 6.7
dj-database-url
Frontend
HTML5
CSS3 (Custom Design)
Vanilla JS
EasyMDE
Pretendard
Space Grotesk
Database
SQLite (로컬)
Neon PostgreSQL (프로덕션)
psycopg2
dj-database-url
Storage
Cloudinary (미디어 파일)
django-cloudinary-storage
AI / RAG
OpenAI GPT-4o-mini
Keyword-based RAG
ChatDocument 자동 동기화
Django Signal
배포
Vercel
GitHub (자동 배포)
Whitenoise (정적파일)
Django 앱 구조
core/
- 랜딩(Overview)
- 홈(Home) · 소개(About)
- 사이트 소개 · 연락처
- 로그인/로그아웃
- 관리자 대시보드
- Profile · Skill · Experience
- MarqueeKeyword · SiteSetting
- ContactMessage
posts/
- 포스트 목록 · 상세
- 글쓰기 · 수정 · 삭제
- 카테고리 · 태그 필터
- EasyMDE 에디터
- Markdown 렌더링
- Post · Category · Tag
- PostAttachment
archive/
- 자료실 목록
- 자료별 비밀번호 서버 검증
- PDF 스트리밍 뷰어 (iframe)
- 파일 URL 비노출
- 다운로드 권한 제어
- 관리자 인라인 수정 UI
- Document 모델
chatbot/
- 플로팅 챗봇 UI
- RAG API 엔드포인트
- OpenAI GPT-4o-mini 연동
- 세션 기반 대화 유지
- 포스트 저장 시 자동 동기화
- rebuild_rag 관리 커맨드
- ChatDocument · ChatSession · ChatLog
DB 구조
core
Profile
1건- name 이름·name_en
- role 직함 · tagline
- summary 한 줄 소개
- bio 소개 페이지 본문
- email · location
- portrait 프로필 사진
core
Skill
6건- key data·ai·dev 등
- label · label_en
- value 0~100 수치
- note 세부 기술명
- order 표시 순서
core
Experience
6건- exp_type 학력·경력·수상 등
- year 연도 (예: 2022-2024)
- title · description
- order · is_active
core
MarqueeKeyword
8건- text 키워드 텍스트
- is_highlight 주황색 강조
- order 표시 순서
- is_active 노출 여부
posts
Post
12건- title · slug · excerpt
- content Markdown 본문
- kind 포트폴리오·블로그
- category FK → Category
- tags M2M → Tag
- thumbnail · grad
- featured · is_published
posts
Category · Tag
8 · 13건- Category key·label·order
- Tag name
Post → FK Category
Post ↔ M2M Tag
Post ↔ M2M Tag
archive
Document
6건- title · description
- doc_type 이력서·자격증 등
- file Cloudinary 저장
- access_password 해시 비밀번호
- allow_download 다운로드 허용
- is_active · order
chatbot
ChatDocument
19건- title · content RAG 소스
- category · source_ref
포스트 저장 시 Signal로 자동 갱신
키워드 검색 → top-5 컨텍스트 주입
키워드 검색 → top-5 컨텍스트 주입
chatbot
ChatSession · ChatLog
3 · 18건- ChatSession session_key
- ChatLog question · answer
- sources 참조 문서 목록
ChatLog → FK ChatSession
RAG 챗봇 구조
사용자 질문
→
키워드 검색
ChatDocument DB
ChatDocument DB
→
컨텍스트 주입
top-4 문서
top-4 문서
→
GPT-4o-mini
OpenAI API
OpenAI API
→
답변 + 로그 저장
향후 임베딩(text-embedding-3-small) + 벡터 유사도 검색으로 고도화 예정.
개선 이력 · 계획
✓
Vercel 배포 구조 재편 완료Django 프로젝트를 레포 루트로 이동, vercel.json · .gitignore · .env.example 정비
✓
정적파일 서빙 (Whitenoise) 완료Whitenoise 미들웨어 적용, CompressedManifestStaticFilesStorage 설정
✓
PostgreSQL 전환 준비 완료dj-database-url · psycopg2 추가, DATABASE_URL 환경변수 기반 자동 전환 (로컬은 SQLite 유지)
✓
포스트 excerpt 데이터 정비 완료구 블로그 마이그레이션 시 잘린 excerpt 5건 수정, 탭 리스트 마크다운 오류 수정
✓
홈 마퀴 키워드 DB 관리 완료MarqueeKeyword 모델 추가, 어드민에서 키워드 추가·순서·강조 색상 설정 가능
✓
Vercel 프로덕션 배포 완료Neon PostgreSQL + Cloudinary + Vercel 스택으로 실제 배포 완료, 기존 데이터 전체 마이그레이션
✓
미디어 파일 외부 스토리지 완료Cloudinary 연동 완료, 업로드 파일 자동 저장·서빙
✓
자료별 개별 비밀번호 관리 완료Document별 access_password 해시 저장, 관리자 인라인 수정 모달 추가
✓
RAG 자동 동기화 · 할루시네이션 방지 완료Django Signal로 포스트·프로필 변경 시 ChatDocument 자동 갱신, 시스템 프롬프트 강화
✓
Featured Projects 섹션 · AI 교육 프로젝트 포스트 완료Overview 하단에 주요 프로젝트 3종 카드 그리드 추가, 청약 대시보드·Gmail 자동화·AI 영상 제작 포트폴리오 포스트 게시 (SVG 아키텍처 도식 포함, MP4 영상 임베드)
1
벡터 임베딩 RAGtext-embedding-3-small + pgvector 기반 유사도 검색으로 챗봇 검색 품질 향상
2
방문자 통계페이지별 조회수, 챗봇 질문 트렌드 대시보드