Chapter 1 · AI Agent

Codex works more like a teammate than a chatbot.

일반적인 챗봇은 질문에 답을 주는 데서 끝나지만, AI 에이전트는 연결된 도구를 실제로 사용해 일을 진행합니다. 폴더를 읽고, 피그마나 웹 서비스와 연결되고, 필요한 파일을 만들고, 작업 흐름을 이어가며 마치 비서처럼 직무를 수행합니다.

“근처 다이소와 올리브영을 찾아서 지도 서비스로 보여줘.”

“저장소를 읽고, 필요한 API를 확인하고, 실제 페이지까지 만들겠습니다.”

Reads files디렉터리 안의 코드와 문서를 읽고 기존 기능을 이해합니다.

Uses tools웹, 피그마, API 같은 연결된 도구를 사용해 실제 작업을 진행합니다.

Builds output설명만 하는 것이 아니라 파일을 만들고 수정하며 결과물을 완성합니다.

Acts like an assistant할 일을 기억하고 순서를 정해 사람의 업무를 도와주는 조수처럼 움직입니다.

Chapter 2 · MCP Server

MCP is a bridge that lets an AI agent use outside capabilities safely.

비전공자 관점에서 보면 MCP 서버는 “AI가 외부 기능을 정리된 방식으로 쓰게 해주는 연결 창구”라고 이해하면 쉽습니다. 이번 프로젝트에서는 다이소와 올리브영 같은 외부 서비스 정보를 AI가 다룰 수 있도록 연결해 두었습니다.

OpenAPI Prompt Guide

For people

우리는 버튼과 화면을 보지만, AI는 MCP 서버를 통해 “매장 찾기”, “재고 확인” 같은 기능 이름을 보고 사용합니다.

For outside services

다이소나 올리브영 같은 외부 서버에서 받아온 정보를 하나의 규칙으로 정리해 AI가 이해하기 쉽게 만듭니다.

For this demo

이번 발표에서는 그 MCP 서버를 다시 일반 사용자가 쓰기 쉬운 웹 페이지와 카카오맵 경험으로 바꿔 보여줍니다.

Chapter 3 · How We Built

이번 페이지는 MCP 서버, Codex, 카카오맵을 연결해 만들었습니다. 사람이 IDE를 열고 모든 코드를 직접 타이핑하지 않아도, AI 에이전트가 저장소를 읽고 필요한 파일을 만들고 수정하면서 실제 웹 프로젝트를 완성할 수 있다는 점이 핵심입니다.

비전공자가 들었을 때 놀라운 포인트는 “질문에 대한 답”이 아니라 “작업의 결과물”입니다. 페이지가 생기고, 지도와 API가 연결되고, Git 저장소까지 정리되는 흐름 자체가 이번 장의 메시지입니다.

Step 1Read the repository and understand the MCP/API structure

Step 2Plan the presentation pages and visual direction

Step 3Connect Kakao Maps and nearby store search

Step 4Create project output and prepare the Git repository

Chapter 4 · Live Service

마지막 장에서는 실제 서비스 화면으로 넘어갑니다. 화이트 중심의 깔끔한 인상, 익숙한 검색과 지도, 그리고 다이소와 올리브영 매장 정보를 한 번에 확인할 수 있는 생활형 경험이 핵심입니다.

Open the Live Demo

What the audience will see

현재 위치, 주변 매장, 브랜드 전환, 상품 재고 확인까지 이어지는 실제 동작 데모

Design direction

다이소 매장의 밝고 정돈된 분위기처럼 화이트 중심, 친절한 구조, 빠르게 읽히는 정보 배치

Why it matters

비전공자도 AI 에이전트가 “말만 하는 도구”가 아니라 “결과물을 만드는 도구”임을 직관적으로 이해할 수 있습니다.