Colophon

사이트 소개 .

이 웹사이트가 어떻게 만들어졌는지 설명합니다.

어떻게 만들어졌나

기존 Django 블로그
devprofessional.xyz (운영 종료)
DjangoSQLite DB포스트/경력 데이터
Claude Code (Anthropic)
AI-Augmented Development
디자인 시안코드 생성구조 설계리팩토링
Now
현재 포트폴리오+블로그
지금 이 사이트
이력서형 포트폴리오RAG 챗봇레이더 차트자료실모바일 전용 UIVercel 배포
기존 블로그의 데이터베이스·콘텐츠 구조를 그대로 가져오고, Claude Code와 함께 디자인 시안을 직접 생성하고 코드로 구현했습니다. 단순 블로그에서 역량 레이더 차트 기반 소개 페이지, RAG 챗봇, 접근코드 기반 자료실, 웹 기반 콘텐츠 편집 UI 등이 더해졌습니다. 이후 Vercel + Neon(PostgreSQL) + Cloudinary 스택으로 실제 배포를 완료했으며, RAG 챗봇의 자동 동기화·할루시네이션 방지, 자료별 개별 비밀번호 관리 등을 지속적으로 개선하고 있습니다. 이후 링크 하나로 공유하는 이력서형 포트폴리오 페이지(/portfolio/)와 모바일 전용 화면(우측 드로어 내비·몰입형 상세·챗봇 바텀시트), 그리고 CSRF·레이트리밋·챗봇 비용 서킷 브레이커·보안 알림 메일 등 봇 트래픽·과금 방어 계층을 추가했습니다.

만든 목적

컴퓨터공학·경영학 복수전공 및 Business Analytics 트랙 이수 경험을 바탕으로, 개인 이력과 프로젝트를 체계적으로 보여주는 포트폴리오 사이트이자 개발·데이터·AI·마케팅 분야의 글을 기록하는 블로그입니다. 기술과 비즈니스를 연결하는 융합형 역량을 방문자에게 효과적으로 전달하는 것이 목표입니다.

기술 스택

Backend
Python 3.12 Django 6.0 Whitenoise 6.7 dj-database-url
Frontend
HTML5 CSS3 (Custom Design) Vanilla JS EasyMDE Mermaid.js draw.io highlight.js Web Share API 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
보안 · 봇 방어
django-ratelimit CSRF · Origin 검증 허니팟 챗봇 비용 서킷 브레이커 보안 알림 메일 (Resend) HSTS · Secure 쿠키
배포
Vercel GitHub (자동 배포) Whitenoise (정적파일)

Django 앱 구조

core/

  • 홈(Home) · 소개(About)
  • 사이트 소개 · 연락처
  • 로그인/로그아웃 (브루트포스 방어)
  • 관리자 대시보드
  • 프로필 · 역량 · 경력 편집
  • Profile · Skill · Experience
  • MarqueeKeyword · SiteSetting
  • ContactMessage (허니팟·rate limit)

posts/

  • 포스트 목록 · 상세
  • 글쓰기 · 수정 · 삭제
  • 카테고리 · 태그 필터
  • EasyMDE 에디터
  • Mermaid · draw.io 다이어그램
  • 이미지 직접 업로드 (Cloudinary)
  • Post · Category · Tag · PostAttachment

archive/

  • 자료실 목록
  • 자료별 비밀번호 서버 검증
  • PDF 스트리밍 뷰어 (iframe)
  • 파일 URL 비노출
  • 다운로드 권한 제어
  • 관리자 인라인 수정 UI
  • Document 모델

chatbot/

  • 플로팅 챗봇 UI · 모바일 바텀시트
  • RAG API (키워드 검색·동의어 확장)
  • OpenAI GPT-4o-mini 연동
  • 세션 기반 대화 유지
  • 포스트·프로필 저장 시 자동 동기화
  • 비용 방어 (rate limit·일일 상한)
  • ChatDocument · ChatSession · ChatLog

portfolio/

  • 이력서형 포트폴리오 (/portfolio/)
  • 링크 공유용 독립 풀페이지
  • 프로젝트별 상세 (리치 에디터)
  • 섹션 순서변경·표시토글·커스텀 섹션
  • 공개/비공개 토글
  • PortfolioSettings · Section · Project
  • Education · SkillBar/Tag · Award 등

DB 구조

core

Profile

1건
  • name 이름·name_en
  • role 직함 · tagline
  • summary 한 줄 소개
  • bio 소개 페이지 본문
  • email · location
  • github_url · linkedin_url
  • portrait 프로필 사진
  • status_* Open to work 뱃지
core

Skill

6건
  • key data·ai·dev 등
  • label · label_en
  • value 0~100 수치
  • note 세부 기술명
  • order 표시 순서
core

Experience

약 7건
  • exp_type 학력·경력·수상 등
  • year 연도 (예: 2022-2024)
  • title · description
  • order · is_active
core

MarqueeKeyword

8건
  • text 키워드 텍스트
  • is_highlight 주황색 강조
  • order 표시 순서
  • is_active 노출 여부
posts

Post

약 16건
  • title · slug · excerpt
  • content Markdown 본문
  • kind 포트폴리오·블로그
  • category FK → Category
  • tags M2M → Tag
  • thumbnail · grad
  • featured · is_published
posts

Category · Tag

8 · 약 30건
  • Category key·label·order
  • Tag name
Post → FK Category
Post ↔ M2M Tag
archive

Document

6건
  • title · description
  • doc_type 이력서·자격증 등
  • file Cloudinary 저장
  • access_password 해시 비밀번호
  • allow_download 다운로드 허용
  • is_active · order
chatbot

ChatDocument

약 17건
  • title · content RAG 소스
  • category · source_ref
포스트 저장 시 Signal로 자동 갱신
키워드 검색 → top-5 컨텍스트 주입
chatbot

ChatSession · ChatLog

누적
  • ChatSession session_key
  • ChatLog question · answer
  • sources 참조 문서 목록
ChatLog → FK ChatSession

RAG 챗봇 구조

사용자 질문
→
키워드 검색
ChatDocument DB · 동의어 확장
→
컨텍스트 주입
top-5 문서 + 프로필
→
GPT-4o-mini
OpenAI API
→
답변 + 로그 저장

본문의 도식·HTML 태그는 저장 시 정제해 순수 텍스트만 인덱싱합니다. 컨텍스트에 없는 정보는 답하지 않도록 시스템 프롬프트로 강제해 할루시네이션을 최소화하며, 향후 임베딩(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 영상 임베드)
✓
에디터 다이어그램 작성 도구 완료본문에 Mermaid 플로우차트·draw.io 드로잉을 삽입하는 빌더, 코드블록 문법 강조(highlight.js) 추가
✓
모바일 전용 화면 개편 완료반응형 단일 URL로 모바일 폭에서 전용 컴포넌트 전환 — 우측 드로어 내비, 몰입형 상세(Web Share), 챗봇 팝업 바텀시트, 다크모드 기본
✓
이력서형 포트폴리오 페이지 완료링크 하나로 공유하는 독립 포트폴리오 페이지(/portfolio/) 신설, 프로젝트별 상세·섹션 구성(순서변경·커스텀 섹션)·공개 토글 (portfolio 앱)
✓
보안 · 봇 트래픽 방어 완료챗봇/폼 CSRF·Origin 검증·허니팟·IP 레이트리밋, 로그인 브루트포스 방어, 챗봇 OpenAI 비용 서킷 브레이커(일일 호출 상한), HTTPS 하드닝
✓
에디터 대용량 이미지 업로드 · RAG 검색 개선 완료브라우저→Cloudinary 직접 업로드(최대 10MB), 챗봇 검색 동의어 확장·프로필 상시 포함·본문 정제로 연락처·프로젝트 응답 품질 향상
✓
참여지표 (조회·좋아요·공유) + 대시보드 완료Post에 조회수·좋아요·공유 카운터 추가, 게스트 좋아요 토글·데스크톱 공유 버튼, 어드민 대시보드 일괄 표(조회수 상위)·총합 카드
✓
총 방문 횟수 카운터 완료SiteCounter 단일 행으로 홈 방문 원자적 집계(관리자 본인 방문 제외), 대시보드 첫 카드로 노출
✓
참여지표 어뷰징 방어 완료공유·좋아요 연타 및 localStorage 초기화 재시도에도 부풀지 않도록 서버 쿠키를 진실 소스로 사용(글당 1회 집계)
✓
보안 알림 메일 완료비정상 접근 감지 시 관리자 메일 통보(Resend HTTP API). 로그인 브루트포스·자료실 무차별·챗봇 상한 도달 3종 훅, 같은 유형 쓰로틀·미설정 시 no-op·발송 실패가 요청을 깨지 않음
1
벡터 임베딩 RAGtext-embedding-3-small + pgvector 기반 유사도 검색으로 챗봇 검색 품질 향상
2
챗봇 질문 트렌드질문 주제·빈도 추이 대시보드