포트폴리오
← 이력서 보기
이력서/포트폴리오를 웹에서 확인하실 수 있습니다.
https://resume.obtuse.kr/a1b2c3d4-e5f6-7890-abcd-ef1234567891/resume https://resume.obtuse.kr/a1b2c3d4-e5f6-7890-abcd-ef1234567891/portfolio
이력서 QR 코드
이력서
포트폴리오 QR 코드
포트폴리오
a1b2c3d4-e5f6-7890-abcd-ef1234567891

이준호

바닥(Infra)부터 천장(App)까지 E2E를 지어 올리는 포트폴리오

2024.03 - 2026.01

이준호 프로필 사진

바닥(Infra)부터 천장(App)까지 E2E를 지어 올리는 엔지니어 이준호입니다.

Python, TypeScript, Java, SQL, Next.js, Spring Boot, FastAPI, Proxmox VE, Docker, Jenkins, Terraform, Ansible, Grafana, Prometheus, Sentry, GCP / OCI, Cloudflare Zero Trust

이준호 | JUNHO LEE

부산소프트웨어마이스터고등학교 (24.03.~27.01 졸업예정)

010-5725-8147 | me@obtuse.kr

https://github.com/obtuse-triangle

Projects

웹 접근성 PTKOREA 산학 협력 프로젝트

PTKOREA 산학 협력 체결식 사진

📆 2025.08. ~ 2026.02.26. (6개월)

🏢 디지털 마케팅 에이전시 - PTKOREA

🚫 회사 보안 정책으로 소스코드 비공개, 일부 이미지 블러 처리

팀원 | 권민재, 이정혁(팀장), 이재환

멘토 | 정상기(Jack), 황지원(Toby), 장서현(Jelly)

기여 | 명도 대비 검수 로직 개발, 백엔드 개발, 클라우드 인프라 관리

협업 | PTKOREA 실무진과 매주 주간 미팅을 통한 애자일 기반 요구사항 반영 및 고도화

Introduction

기존에 있는 웹 접근성 검사 도구는 DOM 내부 요소에 대해서만 Background Color 와 Foreground Color 등을 단순 비교해서 명도 대비를 계산하고, 헤딩 구조 또한 단순 룰베이스로만 검수하는 문제가 있었습니다.

이에 따라 디지털 마케팅 에이전시인 PTKOREA와 협력하여 글로벌 전자제품 e-commerce 페이지를 대상으로 웹 접근성 중 명도 대비와 웹 페이지의 헤딩 구조 검수 자동화 프로젝트를 진행하였습니다.

Contribution

사용자가 대시보드에 URL만 입력하면, 시각적 요소와 DOM 요소가 병합된 검수 결과가 시계열로 축적되도록 설계했습니다. 병목을 막기 위해 Spring 서버를 작업 생성자로, Python 검수 서버를 소비자로 분리하여 Websocket 기반의 파이프라인을 구축했습니다.

워커 노드 관리 화면 사진
검사를 진행하는 워커 노드들을 관리하는 화면
토큰 생성 및 워커 연결 화면 사진
토큰을 생성하여 Websocket 으로 백엔드와 워커간 연결
워커 작업 관리 화면 사진
워커 작업 관리 화면. 각 워커당 하나씩 백엔드 서버에서 할당
  graph TD
  Client[Client Dashboard] -->|1. URL & Env Input| Spring[Spring Boot Server <br/> Task Allocator / Producer]

  DB[(Cloud SQL <br/> Time-series Result)]

  Spring -.->|4. Save Result| DB

  subgraph "Python Worker Nodes"
      Py1[Python Worker 1 <br/> CRAFT OCR]
      Py2[Python Worker 2 <br/> CRAFT OCR]
  end

  Spring <==>|2. WebSocket Connection <br/> Task Queueing| Py1
  Spring <==>|2. WebSocket Connection <br/> Task Queueing| Py2

  Py1 -->|3. Scanning & Validation| DOM_Analysis[DOM & Vision Analysis]

  style DB fill:#f9d0c4,stroke:#333,stroke-width:2px,color:#000

[Trouble Shooting 1] 반응형 웹 대응을 위한 이미지 인식 한계 극복 및 색상 추출 알고리즘 최적화

  • 문제 상황: 초기에는 자체 이미지 모델을 학습시켜 명도 대비 충족 부분을 마스킹하는 방식으로 구현했으나, 해상도와 글씨 크기의 영향을 크게 받아 반응형 웹 환경에서 검수 정확도가 떨어지고, 글씨의 명도 대비 Threshold를 미세하게 조종할 수 없었습니다.
  • 해결 과정:
    • 모델 교체: 다국어를 지원하고, 글자 단위로 Bounding Box를 생성하는 CRAFT 기반 Text Detection 모델로 전환하여 DOM에 존재하지 않는 이미지 내 텍스트까지 감지.
    • 색상 대비 알고리즘 고안: Bounding Box의 4개 꼭짓점 픽셀 색상을 배경색으로 가정하고, 해당 배경색과 RGB 3차원 공간에서 유클리드 거리가 가장 먼 색을 글자색으로 특정하여 명도 대비 검사 진행. d=(R1−R2)2+(G1−G2)2+(B1−B2)2d = \sqrt{{(R_1 - R_2)}^2 + {(G_1 - G_2)}^2 + {(B_1 - B_2)}^2}
    • 시각적으록 검사한 항목들은 IoU 를 기반으로 다시 DOM 데이터와 병합하여 XPath 기반 문제 지점 파악 및 시계열 데이터 누적에 활용
  • 결과:
    CRAFT 기반 명도대비 검사 결과 사진
    CRAFT 기반 명도대비 검사 결과
    DOM 데이터와 병합한 명도 대비 검사 결과 사진
    DOM 데이터와 병합한 명도 대비 검사 결과
    CRAFT 모델의 다국어 지원 사진
    CRAFT 모델의 다국어 지원

[Trouble Shooting 2] GCP Cloud Run 및 VPC를 활용한 무중단 배포와 보안 격리

  • 문제 상황: 매주 반복되는 애자일 스프린트마다 새 버전을 서버에 배포하는 작업이 필요했으며, 해당 반복 작업의 자동화 필요성을 느낌.
  • 해결 과정:
    • CI/CD 파이프라인: GCP를 이용하여 Repo의 Main 브랜치 Dockerfile을 자동으로 읽어 Cloud Build를 수행한 이후, Cloud Run 을 통해 구동하도록 적용
    • 보안 강화: DB 외부 접근을 IP Whitelist 방식으로 전면 차단해 GCP VPC 내부에 격리하고, Cloud Run 에서 내부 VPC 커넥터를 통해 접근하도록 설정했으며, 대시보드 접근 또한 Cloudflare Access를 통해 Zero Trust 인증 체계 구축

AI 브라우저 Prompt Injection 방어 솔루션

2025 SW 마이스터고 연합 해커톤 대상 (부총리 겸 과학기술정보통신부장관상)

AI 브라우저 Prompt Injection 방어 솔루션

📆 2025.11.05. ~ 2025.11.07. (3일)

🏆 2025 SW 마이스터고 연합 해커톤 대상 (부총리 겸 과학기술정보통신부장관상)

https://github.com/All-Around-Team/prompt-injection-defender-extension

https://github.com/All-Around-Team/back-end

https://github.com/All-Around-Team/attack-pages

팀원 | 김준혁(Front), 양병건(Front), 임세혁(Back)

기여 | 확장 개발 및 백엔드 개발

Introduction

최근, AI 브라우저의 인기가 높은데요, AI브라우저에서는 웹 상에서 결제, 예약 등 번거로운 작업을 AI가 대신 처리해주는 AI 에이전트 기능이 핵심 기능입니다. 하지만 최근들어 AI브라우저의 보안 취약점들이 나타나고 있습니다.

💡

참고자료

https://brave.com/blog/comet-prompt-injection/

https://www.nbcnews.com/tech/tech-news/ai-browsers-comet-openai-hacked-atlas-chatgpt-rcna235980

시연영상

일반적인 게시판 사이트처럼 보이지만, 실제로는 프롬프트 인젝션 공격 기법이 적용된 페이지로, 게시판 글을 작성할 때에 무조건 가장 하단에 IP주소를 기재하도록 프롬프팅 되어 있습니다.

Contribution

프로젝트 기획

평소 최신 기술 동향과 이슈들을 계속 모니터링하는 습관을 들여놓은 덕분에, 당시의 큰 보안 이슈였던 AI Browser의 Prompt Injection 공격을 주제로 선정하기 수월했습니다.

초기 계획에서는 Browser Agent를 새로 구현하거나, 기존의 Open Source Agent를 수정하여 구현할 계획이었습니다. 하지만, 3일이라는 해커톤 기간 안에 당장 실질적으로 활용 가능한 솔루션을 만들기에는 무리가 있겠다는 판단을 하였습니다.

당시 출시되어 있던 AI Browser들이 모두 Chromium 기반임을 이용하여 Chrome Extension을 만들어 악의적 프롬프트 요소가 DOM내에 있는지 검사하는 솔루션을 제작하게 되었습니다.

악의적 프롬프트 탐색(Extension)

DOM내에서 악의적 의도를 가진 프롬프트를 탐색하기 위한 Chrome Extension 측 로직을 개발하였습니다.

[Trouble Shooting 1] DOM 스캔 성능 최적화 및 메인 스레드 블로킹 방지

  • 문제 상황: 페이지 내의 악의적 프롬프트를 탐지하기 위해 DOM 전체를 순회할 경우, 메인 스레드를 과도하게 점유하여 브라우저 프리징 현상 발생
  • 해결 과정:
    • 타겟 필터링: AI 는 인식하되 인간의 눈에는 보이지 않는 은닉 텍스트들의 특성(Opacity < 0.1, Contrast Ratio 2:1 미만, Viewport 밖 좌표, Injection 이 가능한 글 길이 등)을 수치화하여, 해당 조건을 만족하는 엘리먼트만 검사하도록 연산 범위 축소
    • 검사 시점 최적화: 브라우저가 최초 HTML 로드 직후부터 무거운 에셋이 다운로드되는 네트워크 대기 시간을 활용하여 백그라운드 스캔 진행
  • 결과: 페이지 초기 로딩 속도에 영향을 적게 주면서 은닉된 프롬프트 인젝션 공격을 성공적으로 탐지 및 차단.
  • 관련 자료: https://github.com/All-Around-Team/prompt-injection-defender-extension/commit/169a84fbc7a5de41b3c8fd85aee70064af5fc7a7

해당 검사에서 은닉으로 의심되면, 해당 텍스트가 실제로 악의적 목적을 가지고 있는지 Backend 측으로 전송하여 검증합니다.

악의적 프롬프트 검증(Backend)

Chrome Extension에서 은닉 의심 항목들의 텍스트를 전달받아, 실제로 악의적 의도가 있는지 점수화를 하는 Backend 로직을 개발하였습니다.

[Trouble Shooting 2] Prompt Injection 여부 판별 모델 선정

검증 로직에서는 Prompt Injection 여부를 판단하는 Text Classification 모델을 1차적으로 사용 후, 인젝션으로 판단된 항목에 대해서만 LLM을 이용하여 위험성 점수를 계산해 반환하도록 했습니다.

  flowchart LR
  DOM[DOM Text] --> CM[Classfication Model] --인젝션 의심--> LLM[LLM Judge] --score < 0.5--> P
  LLM --score >= 0.5--> W([Warning])
  CM ----> P([Pass])
  style P fill:#79b8f7,stroke:#333,stroke-width:2px,color:#000
  style W fill:#ff739a,stroke:#333,stroke-width:2px,color:#000

직업계고 취업 역량 강화 및 교육과정 편성의 방향성 제공을 위한 통합 포털 솔루션 - 산들

2025 부산소프트웨어마이스터고 전공동아리 INSERT

📆 2025.03.25. ~ 2025.11.27. (11개월)

🏆 2025 부산소프트웨어마이스터고 전공동아리 전시회 동상

🏆 COEX Softwave 2025 작품 전시

Introduction

학생들의 포트폴리오를 전산화하고, 취업자들의 데이터를 통합 관리하여, 다양한 데이터를 활용한 취업 인사이트를 제공하는 BI 서비스입니다.

Contribution

저는 해당 프로젝트에서 백엔드 개발과 클라우드 인프라 관리를 담당하였습니다. Spring Boot를 이용하여 RESTful API를 개발하였으며, GCP를 활용하여 안정적인 클라우드 인프라를 구축하였습니다. 또한, Docker와 Jenkins를 이용하여 CI/CD 파이프라인을 구축하여 효율적인 배포 프로세스를 구현하였습니다.

대시보드 시각화

산학협력부에서 정보가 업데이트 될 때 마다 항상 직접 시각화하던 정보들을 실시간으로 자동 업데이트 하도록 대시보드를 제작하였습니다. PostgreSQL과 Grafana가 사용되었습니다.

동아리 서버 인프라 관리

전공동아리 INSERT 서버 구축의 전 과정을 담당하여 진행했습니다. 주요 기술스택으로는 Proxmox, Terraform, Ansible, Docker, Docker Compose가 사용되었습니다.

하드웨어 세팅부터 가상화까지 (Bare-metal to Virtualization)

동아리 서비스 운영을 위한 전용 서버를 마련하고, 트래픽 및 다중 컨테이너 운용을 대비해 메모리를 64GB로 확장했습니다. 효율적인 리소스 관리를 위해 베어메탈 상태가 아닌 Proxmox VE를 도입하여 가상화 환경을 구축했습니다. 이를 통해 서비스별로 격리된 환경을 제공하고, 장애 발생 시 영향도를 최소화할 수 있는 기반을 마련했습니다.

교내 서버 특성상 포트포워딩이 불가능하여 Cloudflare Tunnel을 도입하였습니다. 하지만 초기 구성에서는 Next.js 과 Supabase가 같은 내부망에 있음에도 외부 도메인을 거쳐 통신하는 비효율이 존재했습니다.

[Trouble Shooting 1] Cloudflare Tunnel 환경에서의 Next.js - DB API 레이턴시 병목 해결

[Collaboration] 개발 생산성을 높이는 CI 파이프라인

  • 문제 상황: 팀의 PR 주기가 1주일에 1건 수준으로 늘어지는 문제 발생
  • 원인 분석: 팀원의 PR을 확인하기 위해서는 각자가 변경사항을 Stash 하거나 Commit 한 이후 변경사항을 당겨와 로컬 서버에서 각각 확인하고 승인해야 하는 불편함이 원인
  • 해결 과정:
    • PR이 올라오면 자동으로 개발 서버에 배포되어 PR을 편하게 확인할 수 있도록 Jenkins 기반 CI 파이프라인 도입
    • Github Actions 등 다른 CI/CD 솔루션이 있지만, 이 또한 학교 내부망 서버로 SSH 접속이 까다롭다는 점에 따라 Jenkins를 내부망에 띄우기로 결정.
  • 결과: PR Merge 주기가 1회/주 에서 1.5회/일로 팀 전체의 생산성 향상
  • 관련 자료:

1️⃣ 동적 프리뷰 환경

PR 번호에 기반한 포트 할당으로 격리된 테스트 환경 제공.

동적 프리뷰 환경 사진

2️⃣ 리소스 수명주기 관리

PR Close 이벤트 발생 시 Webhook을 통해 관련 컨테이너 및 이미지를 즉시 삭제하여 유휴 리소스 방지.

리소스 수명주기 관리 사진

3️⃣ 검증 자동화

Lighthouse CI를 통한 프론트엔드 성능 지표 측정 및 Sentry 연동.

IaC를 통한 인프라 관리의 코드화 (Infrastructure as Code)

수작업으로 인한 설정 오류(Human Error)를 방지하고, 추후 동아리 후배들이 인프라를 쉽게 이해하고 유지보수할 수 있도록 IaC 도구를 적극 도입했습니다. ‘코드가 곧 문서’가 되는 환경을 구축하여 인수인계의 복잡도를 획기적으로 낮췄습니다.

  • Terraform: Proxmox 내의 LXC 컨테이너 생성과 네트워크 설정을 코드로 정의했습니다. 이를 통해 복잡한 설정 없이 명령어 한 줄로 인프라를 프로비저닝할 수 있어, 인프라 지식이 부족한 후배들도 손쉽게 환경을 구축할 수 있게 했습니다.
  • Ansible: 서버 내 Docker 환경 설치, 시스템 설정, 네트워크 구성을 자동화했습니다. 언제든 동일한 상태의 서버를 복제해낼 수 있어, 운영진이 바뀌어도 기술 부채 없이 안정적인 서비스 운영이 가능하도록 구성했습니다.

옵저빌리티 (Observability) 스택

계층도구주요 측정 항목
ApplicationSentry런타임 에러, API 응답 속도, 소스맵 기반 트래킹
InfrastructureInfluxDB, GrafanaNginx 액세스 로그, Docker 리소스(CPU/Mem) 사용량
FrontendLighthouse렌더링 성능, 웹 접근성, SEO 점수
Infrastructure (InfluxDB, Grafana)

Infrastructure (InfluxDB, Grafana)

Application (Sentry)

Application (Sentry)

Frontend (Lighthouse)

Frontend (Lighthouse)

2026

2026.04. 리눅스마스터 2급 취득 (LMS-2601-002848)

2026.02. 제 563회 정기 TOEIC 시험 700점 (LC400, RC300)

2025

2025.12. 부산SW마이스터고 동계해커톤 최우수상

2025.12. COEX Softwave 2025 부스 전시 (교내 전공동아리 우수작)

2025.11. 부산SW마이스터고 교내 전공동아리 전시회 동상

2025.11. SW마이스터고 연합 해커톤 대상 - 부총리 겸 과학기술정보통신부장관상

2025.09. U-BDIA AI•SW 페스티벌 발표(미국현장체험학습 프로젝트 우수작)

2025.08. PTKOREA, 부산소프트웨어마이스터고 산학협력 프로젝트 체결

2025.07. 1학기 정보통신, 데이터베이스 프로그래밍, 프로그래밍(JAVA), 응용 프로그래밍 개발, 빅데이터 분석 과목 교과우수상

2025.07. 정보처리산업기사 취득(25251030182P)

2025.05. 미국 현장체험학습 - 산호세 주립 대학교 연계 프로젝트

2025.05. COEX AI EXPO KOREA 2025(국제인공지능대전) 전시 (교내 AI 공모전 우수작)

2025.04. 부산SW마이스터고 교내 AI공모전 1위

2025.01. 부산대학교 x 부산소프트웨어마이스터고 연계 겨울방학 특강

2025.01. 부산SW마이스터고등학교 네트워크 경진대회 우수상

2024

2024.12. 부산SW마이스터고 아이디어톤 최우수상

2024.12. COEX Softwave 2024 부스 전시 (고등학생 SW개발 공모전 수상작)

2024.11. 대한민국 고등학생 SW 개발 공모전 「Software FUTURE&DREAM Challenge 2024」 대상 - 과학기술정보통신부장관상(제 24-06406호)

2024.09. Bexco AI Korea 2024 부스 전시 (교내 AI공모전 우수작)

2024.09. 부산SW마이스터고 교내 AI공모전 3위

2024.08. 국제 드론 해킹 방어대회

2024.08. 대한민국 SW융합 해커톤

2024.07. 부산SW마이스터고 교내 하계해커톤 대상

2024.07. 1학기 컴퓨터구조 교과우수상

2024.07. 부산SW마이스터고 교내 화면구현 대회 2위

2024.05. 한국정보올림피아드 1차 대회 장려상 (제 2024-1-1556호)

2024.05. TOPCIT 21회 정기평가 응시 - 3수준/423점 (TP24010510216)

2023

2023.11. 콘텐츠유니버스 해커톤 참가

2023.09. ‘코딩으로 지역을 창작하다’ 창업경진대회 최우수상

2023.08. 부울경 중학생 알고리즘 경진대회 동상

2023.07. 부산에듀원 썸머 코딩 페스티벌

2023.06. 대한민국 학생창의력 챔피언 부산예선대회 금상

👀 아직 준비중인 프로젝트들

납득 가능한 우리말 순화 - 나랏말싸미

2025 부산소프트웨어마이스터고 AI공모전 1위
2025 고등학생 소프트웨어 개발 공모전 「Software FUTURE&DRREAM Challenge 2025」 금상 - 한국인공지능소프트웨어협회장상

나랏말싸미 표지 사진

📆 2025.01.22. ~ 2025.05.23. (4개월)

🏆 2025 부산소프트웨어마이스터고 AI공모전 1위

🏆 2025 고등학생 소프트웨어 개발 공모전 「Software FUTURE&DREAM Challenge 2025」 금상 - 한국인공지능소프트웨어협회장상

NARATMALSAMI-WEB

팀원 | 권민재, 이정혁(팀장), 이재환, 한지원

기여 | 프론트 에디터 환경 개발 및 RAG AI 개발

Introduction

최근 설문에 따르면 “신문·방송에서 사용하는 말의 의미를 몰라 곤란하다”는 응답이 89%에 달할 만큼 외래어 사용이 급증하고 있습니다. 정부는 모든 국민이 쉽게 이해할 수 있도록 우리말 중심의 공공언어 사용을 권장하나, 국립국어원이 제안한 순화어가 직관적이지 않아 활용되지 못하고 있습니다. 정보화·글로벌화·AI 시대에 외래어 유입이 가속화되면서 비직관적 공공언어로 인한 행정 비효율과 국민의 알 권리 저해 문제가 심화되고 있습니다.

이러한 문제점을 해결하기 위해 인공지능을 활용해 문장 속 외래어를 감지하고, 사용자 선호도와 사용량을 반영해 문맥에 맞는 순화어를 추천해주는 서비스를 만들었습니다.

Contribution

국립국어원 순화어를 기반으로 사용량과 선호도 데이터 분석

국립국어원이 제안한 순화어 데이터셋을 기반으로, 실제 사용량과 사용자 선호도를 분석하여, 단순히 사전에 정의된 순화어를 제안하는 것이 아니라, 실제 사용자들의 선호도를 반영한 맞춤형 추천이 가능하도록 데이터 분석을 진행하였습니다.

선호도 데이터는 설문 조사를 실시하여 각 단어마다 얼마나 원래의 뜻을 잘 나타내고 있는지를 1-5점 점수로 받았으며, 사용량 데이터는 구글 검색량을 기반으로 순화어와 외래어 각각의 검색량을 수집하여, 순화어가 외래어에 비해 얼마나 사용되고 있는지를 분석하였습니다.

이렇게 수집한 선호도와 검색량 데이터를 기반으로, 각 단어별 최종 가중치를 매겼습니다. 특히 검색량 가산점은 코드 레벨의 if-else 규칙을 그대로 수식화한 구간 함수로 정의해, 의사결정 근거를 정량적으로 설명할 수 있도록 구성했습니다.

r=VrefinedVoriginalr = \frac{V_{\text{refined}}}{V_{\text{original}}}B(Voriginal,Vrefined)={4,Voriginal=0∧Vrefined>03-2,r≥1.52-1,0.8≤r<1.50-(−2),r<0.8B(V_{\text{original}}, V_{\text{refined}}) = \begin{cases} 4, & V_{\text{original}} = 0 \land V_{\text{refined}} > 0 \\ 3\text{-}2, & r \ge 1.5 \\ 2\text{-}1, & 0.8 \le r < 1.5 \\ 0\text{-}(-2), & r < 0.8 \end{cases}
  • VoriginalV_{\text{original}}: 원어 검색량 평균
  • VrefinedV_{\text{refined}}: 순화어 검색량 평균
  • rr: 외래어 대비 순화어 검색량 비율
  • BB: 검색량 기반 가산점

임계값 설정 근거 수집된 단어 데이터의 검색량 비율(rr) 분포를 분석하여 논리적 구간을 설정하고 가산점을 차등 부여했습니다.

  • 순화어 단독 (+4점): 외래어 검색량이 없고 순화어만 쓰이는 이상적인 케이스
  • 순화어 우위 (+2-3점): r≥1.5r \ge 1.5 (순화어가 외래어보다 명확히 더 많이 쓰여 적극 추천하는 구간)
  • 경합 (+1-2점): 0.8≤r<1.50.8 \le r < 1.5 (사용량이 비슷하여 완만한 가산점 부여)
  • 외래어 우위 (0-(-2)점): r<0.8r < 0.8 (아직 순화어가 정착되지 않아 추천 시 어색함을 줄 수 있으므로 감점 처리)

위 방식으로 “외래어 대비 순화어 실제 사용 비율”을 연속값 rr로 계산하고, 해석 가능한 구간 점수로 변환하였습니다. 해당 검색량 가중치와 설문조사 가중치를 합쳐 RAG 추천 가중치에 반영했습니다.

이를 통해 단순히 사전에 정의된 순화어를 제안하는 것이 아니라, 실제 사용자들의 선호도를 반영한 맞춤형 추천이 가능하도록 구현하였습니다.

프론트엔드 에디터 환경 개발

CKEditor 기반으로 WISYWIG 에디터를 커스터마이징하여, 외래어가 감지되면 해당 단어에 하이라이트가 적용되고, 클릭 시 대체 가능한 순화어 목록이 툴팁과 사이드 패널에 표시되는 UI를 구현하였습니다.

바이브 코딩에서 컨텍스트 엔지니어링으로 - Contexty

2026 부산소프트웨어마이스터고 AI 경진대회 - 딸깍연구소 팀

📆 2026.01. ~ 진행 중

🏆 2026 부산소프트웨어마이스터고 AI 경진대회 - 딸깍연구소 팀

팀원 | 이준호(팀장), 이재환, 한지원, 김한결, 이규민

기여 | 기획,프로젝트 매니징, AASM 기능 개발, 영상 제작

Introduction

현존하는 AI 개발 도구들은 바이브 엔지니어링을 수행하기에도, 바이브 코딩을 수행하기에도 구조적으로 한계가 있어 Double Pain Point 를 유발하고 있습니다.

기존 관행에 따른 AI - 인간 협업 방법론

  • 비제약 자동화 (Unconstrained Automation - UAM)
    • 인간의 개입을 최소화하고 AI 에이전트가 요구사항 분석부터 최종 코드 생성까지 자율적으로 수행
  • 반복적 대화형 협업(Iterative Conversational Collaboration - ICCM)
    • 인간과 AI가 채팅 기반의 인터페이스를 통해 지속적으로 피드백을 주고받으며 코드를 완성해 나가는 모델
  • 계획 주도형 모델 (Planning-Driven Model - PDM)
    • 코드를 바로 작성하기 전, 에이전트가 먼저 전체적인 구현 계획(Step-by-step Plan)을 수립하고 인간의 승인을 받은 뒤 실행에 옮기는 방식
  • 테스트 주도형 모델 (Test-Driven Model - TDM)
    • 소프트웨어 엔지니어링의 TDD(Test-Driven Contributionment) 원칙을 적용한 모델입니다. 인간이 테스트 케이스를 정의하면, 에이전트는 이 테스트를 통과할 때까지 코드를 생성하고 수정

하지만 이런 방식들 모두 숙력된 개발자가 바이브 엔지니어링을 수행하기에는 아래와 같은 Pain Point가 존재했으며,

  • 컨텍스트 블랙박스 문제
  • LLM 고유의 인지적 한계로 인한 되돌릴 수 없는 컨텍스트 오염

비 전문가가 바이브 코딩을 수행하기에 는 아래와 같은 Pain Point가 존재했습니다.

  • 생산성의 역설
  • 유지보수 관점의 구조적 취약성

따라서, 전문가들이 컨텍스트를 직접 조작할 수 있도록 하는 컨텍스트 엔지니어링을 가능하게 하고, 비전문가들은 생산성이 향상되도록 유지보수가 가능한 코드를 생성하도록 돕는 추가적인 에이전트를 이용한 두가지의 새로운 AI - 인간 협업 모델을 제시합니다.

인간 감독 컨텍스트 관리 모델 (Human-supervised Context Managing Model - HSCMM)

AI가 읽은 컨텍스트 영역이 IDE 상에서 시각화된 모습
AI가 읽은 컨텍스트 영역이 IDE 상에서 시각화된 모습
컨텍스트를 수동으로 삭제하는 모습
컨텍스트를 수동으로 삭제하는 모습
  • AI-Agent를 사용하는 사용자가, Agent의 뇌 속(컨텍스트)을 직접 관리할 수 있도록 하는 모델.
  • 자동으로 관리되는 컨텍스트는 필연적으로 블랙 박스가 될 수 밖에 없고, 새 채팅을 계속 만드는 구조적 문제가 있음
  • 따라서 ICCM에 비해 새 채팅을 만들지 않아도 되어 더 빠르고, 계획 주도형과 유사한 수준의 안정성을 보장.

능동형 에이전트 감독 모델 (Active Agent-supervised Model - AASM)

  • 전문성이 부족하여 바이브 엔지니어링에 어려움을 겪는 사람들을 위해 새롭게 제시하는 바이브 코딩 패러다임
  • 기존의 바이브 코딩 에이전트는 비전문가의 말을 무조건적으로 따라 어떤 요구든 수용하여 생산성의 역설을 일으켰음
  • AASM 에서 능동형 에이전트는 사용자의 제안을 무조건적으로 따르는 것이 아닌, 사용자의 의도를 파악하여 가장 적합한 아키텍처를 역제안하는 실시간 아키텍처 린터로 작동.

Contribution

프로젝트 총괄 기획 및 패러다임 설계

단순 코드 생성을 넘어 의도와 아키텍처를 사람이 통제하는 ‘컨텍스트 엔지니어링’ 패러다임을 차용한 새로운 AI 에이전트 코딩 도구 개발을 제시.

  • 숙련된 개발자를 위한 HSCMM, 비전문가를 위한 AASM 등 새로운 AI-인간 협업 모델 제시.
  • 최근 AI 코딩 트렌드 및 ‘컨텍스트 오염’으로 인한 성능 저하 데이터 분석 및 문서화

핵심 기능 개발 AASM(능동적 에이전트 감독 모델)

사용자의 요구를 무조건 수용하는 대신, 의도를 파악하여 최적의 아키텍처를 역제안하는 ‘실시간 아키텍처 린터’ 구현.

  • 사용자의 명령이 유지보수가 어려운 ‘안티패턴’인지 감지
  • 능동적 감독 에이전트가 명령의 의도를 추론하여 설계 검증 및 수정 제안

티저 영상 제작

주도적으로 영상 제작에 나서 After Effects 3D 기능을 이용하여 티저 영상을 제작했습니다.

AASM 파트

image.png

HSCMM 파트

image.png