사람과 AI 사이 그 어딘가

2026년 7월 기준 n8n은 AI·앱·API를 노드로 잇는 오픈소스(페어코드) 자동화 도구입니다. MCP를 기본 지원하는 지금은 시작하기에 늦은 시점이 아니고, 그 이유와 선택 기준을 이 글에서 정리합니다.이번 변화의 핵심은 AI가 워크플로를 직접 도구로 쓴다는 데 있습니다.n8n은 필요할 때 커스텀 코드를 넣는 시각적 자동화 도구입니다. 2026년의 핵심은 MCP Server Trigger와 MCP Client Tool로 AI와 워크플로를 양방향으로 잇는다는 점입니다.n8n 지금 시작해도 늦지 않을까늦지 않았습니다. 오히려 AI 자동화를 업무 흐름에 붙이기 좋아진 시점에 가깝습니다.정해 둔 순서대로 앱과 API를 잇던 자동화를 넘어, 이제는 AI가 필요한 워크플로를 골라 쓰는 구조까지 다룰 수 있습니..

AI 이야기/이렇게 쓴다 2026. 7. 21. 22:18

API 엔드포인트는 API에 요청을 보낼 때 찾아가는 구체적인 주소로, 기능마다 창구가 하나씩 있습니다.2026년 7월 기준으로, AI에게 코드를 부탁하면 결과물에 /api/users 같은 주소가 심심찮게 등장합니다.이 글을 읽으면 그 주소가 무슨 뜻인지, 왜 API 하나에 여러 개가 달려 있는지 감이 잡힙니다.API가 하나의 큰 건물이라면, 엔드포인트는 그 건물 안의 개별 창구 주소입니다. 회원 업무는 회원 창구, 주문 업무는 주문 창구로 나뉘듯, 기능마다 주소가 따로 있습니다.API를 한 줄로 복습하면API는 프로그램끼리 정해진 방식으로 대화하도록 연결해 주는 규칙입니다.쉽게 말하면 "이렇게 요청하면 이렇게 답해 줄게"라고 미리 약속해 둔 창구 같은 것입니다.이 창구가 있어야 내 앱이 다른 서비스의 ..

서버·개발/코드 노트 2026. 7. 21. 21:16

DOM은 브라우저가 HTML 문서를 나무(트리) 구조로 정리해둔 것으로, 자바스크립트는 이 구조를 통해 화면을 바꿉니다.2026년 7월 기준으로, AI에게 코딩을 맡기다 보면 "DOM을 조작한다"는 말과 자주 마주칩니다.이 글을 읽으면 웹페이지 화면이 어떻게 바뀌는지, 그 원리 한 가지를 확실히 잡을 수 있습니다.DOM은 브라우저가 HTML을 나무 구조로 해석해둔 것입니다. 자바스크립트는 이 나무에서 원하는 부분을 찾아 내용이나 색을 바꾸고, 그 순간 화면이 바뀝니다.화면은 대체 어떻게 바뀌는 걸까웹페이지에서 버튼을 누르면 글자가 바뀌거나 새 항목이 나타납니다.페이지를 새로 불러온 것도 아닌데 화면 일부가 달라집니다.이렇게 "부분만 바뀌는" 일의 한가운데에 DOM이 있습니다.브라우저는 HTML 파일을 읽..

서버·개발/코드 노트 2026. 7. 21. 21:15

핫 리로드는 코드를 고쳐서 저장하면 브라우저를 새로고침하지 않아도 바뀐 부분이 화면에 바로 나타나는 기능입니다. 2026년 7월 기준으로 웬만한 개발 도구에는 기본으로 들어 있고, AI로 코딩을 시작한 초보라면 처음 며칠 안에 반드시 마주치게 됩니다. 이 글을 읽으면 "핫 리로드"라는 말이 정확히 뭘 가리키는지, 왜 이게 개발 속도를 크게 바꾸는지, AI로 코딩할 때 왜 특히 편해지는지를 한 번에 정리할 수 있습니다.핫 리로드는 코드 저장 순간 화면에 결과가 즉시 뜨는 "실시간 미리보기"입니다. 예전처럼 고칠 때마다 새로고침하고 기다릴 필요가 없어, 수정하고 바로 확인하는 과정이 훨씬 빨라집니다.예전엔 왜 불편했을까코드를 조금 고쳐서 화면이 어떻게 바뀌는지 보고 싶다고 해봅시다.예전 방식은 이랬습니다.코..

서버·개발/코드 노트 2026. 7. 21. 21:14

`, and paragraph count intact. Key targets: a few mechanical connectives and slightly stiff phrasings. Returning the humanized HTML in full.트랜스파일과 컴파일은 둘 다 코드를 다른 형태로 번역하지만, 트랜스파일은 비슷한 급의 언어끼리 바꾸고 컴파일은 더 낮은 단계(기계어 쪽)로 바꿉니다. 2026년 7월 기준으로 AI에게 코드를 받아 웹을 만들다 보면 "이건 트랜스파일해야 돌아간다" 같은 말을 자주 만나게 됩니다.이 글을 읽으면 두 단어가 왜 헷갈리는지, 초보 입장에서 무엇만 기억하면 되는지 정리됩니다.트랜스파일은 같은 급의 언어끼리 번역하는 것(타입스크립트를 자바스크립트로, 최신 자바스크립트를..

서버·개발/코드 노트 2026. 7. 21. 21:14

번들러는 흩어져 있는 여러 코드 파일을 브라우저가 빠르게 불러올 수 있게 하나로 묶어주는 도구입니다.2026년 7월 기준, AI에게 "웹 프로젝트 만들어줘"라고 하면 대부분 이 번들러가 뒤에서 조용히 돌아갑니다.이 글을 읽으면 번들러가 왜 필요한지, Webpack과 Vite가 뭐가 다른지, 그리고 AI 코딩과 무슨 상관인지까지 한 번에 이해할 수 있습니다.번들러는 흩어진 코드 파일을 하나로 포장하는 택배 포장기입니다. 파일이 수십, 수백 개로 늘어나도 브라우저는 잘 정리된 묶음 몇 개만 받으면 되니 훨씬 빨라집니다.번들러는 왜 필요할까요즘 웹사이트 하나를 만들면 코드 파일이 정말 많아집니다.화면을 그리는 파일, 버튼을 움직이는 파일, 남이 만든 부품을 가져다 쓰는 파일까지 금방 수십, 수백 개가 됩니다...

서버·개발/코드 노트 2026. 7. 21. 21:13

.env는 API 키나 비밀번호처럼 공개하면 안 되는 값을 코드와 분리해 따로 적어두는 파일입니다.2026년 7월 기준으로, AI에게 코드를 받아 돌려보는 초보라면 이 파일을 거의 반드시 마주칩니다.이 글을 읽으면 .env가 왜 필요한지, 어떻게 생겼는지, 왜 "절대 깃허브에 올리면 안 되는지"까지 한 번에 이해할 수 있습니다..env는 API 키·비밀번호 같은 "공개하면 안 되는 값"을 코드 바깥의 쪽지에 적어두는 파일입니다. 코드에서는 값을 직접 쓰지 않고 이 쪽지를 불러다 씁니다. 그리고 이 쪽지는 절대 깃허브에 함께 올리지 않습니다.왜 .env가 필요한가코드 안에 비밀번호나 API 키를 그대로 적어 넣는 건 생각보다 위험합니다.가장 흔한 사고는 이렇습니다.키를 코드에 적어둔 채 프로젝트를 깃허브 ..

서버·개발/코드 노트 2026. 7. 21. 21:12

배포는 내 컴퓨터에서만 돌던 웹을 인터넷에 올려서 누구나 주소로 접속할 수 있게 만드는 것입니다. 2026년 7월 기준, AI로 웹사이트나 앱을 만드는 초보가 마지막에 꼭 마주치는 단어가 바로 이 "배포(deploy)"입니다.이 글을 읽으면 배포가 왜 필요한지, 실제로 뭘 하는 건지, 그게 AI로 만든 결과물과 무슨 상관인지가 한 번에 정리됩니다.배포는 내 컴퓨터에서만 열리던 웹을 인터넷 서버에 올려 "남도 볼 수 있게 개업"하는 과정입니다. 가게를 다 지었어도 문을 열어야 손님이 오듯, 웹도 배포해야 세상에 공개됩니다.왜 배포가 필요할까웹사이트를 만들면 보통 내 컴퓨터에서 먼저 확인합니다.이때 브라우저 주소창에 뜨는 게 localhost, 즉 "내 컴퓨터 안의 주소"입니다.문제는 이 localhost ..

서버·개발/코드 노트 2026. 7. 21. 13:28