본문 바로가기
반응형

전체 글511

🎯 AI에게 웹 화면 요청하는 법 — 한 번에 원하는 UI가 나오는 프롬프트 6요소와 UI 부품 이름 사전 🎯 AI에게 웹 화면 요청하는 법 — 한 번에 원하는 UI가 나오는 프롬프트 6요소와 UI 부품 이름 사전같은 AI를 쓰는데 누구는 두세 번 만에 원하는 화면을 받고, 누구는 열 번을 고쳐도 마음에 들지 않는다. 차이는 AI가 아니라 요청문에 있다. 특히 웹 화면을 요청할 때는 글을 써 달라거나 요약해 달라고 할 때와 다른 어려움이 있다. 머릿속에 그려진 '눈에 보이는 모습'을 말로 옮겨야 하기 때문이다. "예쁜 예약 페이지 만들어 줘"라고 하면 AI는 무엇이 예쁜지, 예약 페이지에 무엇이 들어가야 하는지, 휴대폰용인지 PC용인지 전부 추측한다. 추측이 내 머릿속과 다르면 고치는 데 시간이 든다. 이 글은 그 추측을 줄이는 법을 다룬다. 화면 요청문을 이루는 여섯 가지 요소, 정확히 짚어 말하기 위한 .. 2026. 10. 15.
🥐 AI로 첫 웹페이지 만들기 실습 — 무료 AI와 메모장으로 30분 만에 빵집 소개 페이지 완성하기 🥐 AI로 첫 웹페이지 만들기 실습 — 무료 AI와 메모장으로 30분 만에 빵집 소개 페이지 완성하기설명은 이 정도면 충분하다. 이번에는 직접 만들어 본다. 준비물은 세 가지뿐이다. 무료로 쓸 수 있는 대화형 AI(ChatGPT, Claude, Gemini 중 아무거나), 컴퓨터에 원래 깔려 있는 메모장, 그리고 크롬이나 엣지 같은 브라우저. 프로그램을 따로 설치할 필요도, 돈을 낼 필요도 없다. 오늘 만들 것은 동네 빵집 소개 페이지다. 가게 이름과 소개, 오늘의 빵 세 가지, 주소와 영업시간, 전화 예약 버튼, 그리고 지금 시각에 따라 '영업 중'과 '준비 중'이 바뀌는 표시까지 들어간다. 이 글을 따라 AI에게 요청하고, 파일로 저장하고, 브라우저로 열고, 고쳐 달라고 하고, 휴대폰 화면까지 확인.. 2026. 10. 13.
🗺️ AI로 웹 화면 만들 때 어떤 도구를 써야 할까 — 대화형·디자인 생성·앱 빌더·코딩 에이전트 고르는 법 🗺️ AI로 웹 화면 만들 때 어떤 도구를 써야 할까 — 대화형·디자인 생성·앱 빌더·코딩 에이전트 고르는 법"AI로 웹사이트 만들어 보고 싶은데, 뭘로 시작해야 해요?" 이 질문에 사람마다 답이 다르다. 누구는 ChatGPT로 충분하다고 하고, 누구는 Lovable이 최고라고 하고, 누구는 Cursor 없이는 못 한다고 한다. 검색해 보면 'AI 앱 빌더 TOP 14' 같은 글이 쏟아지고, 도구 이름만 읽다가 지친다. 사실 이 도구들은 이름은 수십 개여도 종류는 네 가지뿐이다. 종류만 구분하면 "지금 내 상황엔 이 종류가 맞겠구나"가 보이고, 그다음 그 종류 안에서 아무거나 하나 골라 써 봐도 크게 틀리지 않는다. 이 글은 AI 웹 화면 도구를 네 종류로 나눠 지도를 그리고, 초보자가 어떤 순서로 올.. 2026. 10. 13.
🧩 컴포넌트·React·Next.js·Tailwind 뜻 — AI가 만든 코드를 열면 보이는 낯선 말들, 레고로 이해하기 🧩 컴포넌트·React·Next.js·Tailwind 뜻 — AI가 만든 코드를 열면 보이는 낯선 말들, 레고로 이해하기AI에게 "빵집 홈페이지 만들어 줘"라고 하면, 기대했던 건 HTML 파일 하나다. 그런데 돌아온 답에는 이런 말들이 가득하다. "Next.js 프로젝트를 생성했습니다. Tailwind로 스타일링했고, 상품 카드는 컴포넌트로 분리했습니다. npm install 후 npm run dev를 실행하고 localhost:3000에서 확인하세요." 폴더를 열어 보면 파일이 수십 개이고, node_modules라는 폴더는 열어 보기도 겁날 만큼 거대하다. 이 글은 그 낯선 말들을 하나씩 풀어 주는 안내서다. 외울 필요는 없다. 레고 블록 비유 하나로 컴포넌트·React·Next.js·Tailwi.. 2026. 10. 13.
🍽️ 프론트엔드 vs 백엔드 — 웹 화면 뒤에서는 무슨 일이 일어날까 (AI는 어디서 일하나) 🍽️ 프론트엔드 vs 백엔드 — 웹 화면 뒤에서는 무슨 일이 일어날까 (AI는 어디서 일하나)AI로 처음 웹 화면을 만들어 본 사람이 거의 반드시 겪는 장면이 있다. 회원가입 화면을 그럴듯하게 만들었다. 입력칸도 예쁘고 버튼도 잘 눌린다. 그런데 가입하고 새로고침을 하면, 방금 입력한 정보가 감쪽같이 사라져 있다. 친구에게 링크를 보내 줘도 친구 화면에는 내 글이 보이지 않는다. "분명 다 만들었는데 왜 저장이 안 되지?" 답은 단순하다. 손님이 보는 홀은 지었는데, 음식을 만들고 재료를 보관하는 주방과 창고가 없기 때문이다. 이 글은 웹사이트의 '보이는 쪽'인 프론트엔드와 '보이지 않는 쪽'인 백엔드가 어떻게 나뉘어 있는지 식당에 빗대어 설명하고, AI가 그 사이 어디에서 잘 일하고 어디에서 조심해야.. 2026. 10. 12.
🏠 웹 UI가 뭐야? — HTML·CSS·JavaScript를 집짓기로 이해하는 첫걸음 🏠 웹 UI가 뭐야? — HTML·CSS·JavaScript를 집짓기로 이해하는 첫걸음요즘은 "AI한테 시키면 화면 하나쯤 뚝딱 만들어 준다"는 말을 자주 듣는다. 실제로 그렇다. 그런데 막상 해 보면 금방 벽에 부딪힌다. AI가 만들어 준 화면에서 버튼 위치를 살짝 옮기고 싶은데, 뭐라고 말해야 할지 모르겠다. 어딘가 깨졌는데, 어디가 문제인지 설명을 못 한다. 결국 "다시 해 줘"만 반복하다 지친다. 이 시리즈는 그 벽을 넘기 위한 안내서다. 코딩을 한 줄도 몰라도, UI라는 말을 처음 들어도 괜찮다. 첫 편에서는 AI 도구를 켜기 전에 꼭 알아야 할 가장 기초, 곧 웹 화면이 무엇으로 만들어지고 어떻게 눈앞에 나타나는지를 집짓기에 빗대어 정리한다. 이것만 알아도 AI에게 하는 말이 확 달라진다. .. 2026. 10. 7.
🦆 DuckDB 완전 정리 — 노트북 한 대로 하는 빠른 분석 데이터베이스 🦆 DuckDB 완전 정리 — 노트북 한 대로 하는 빠른 분석 데이터베이스데이터 분석이라고 하면 흔히 거대한 클러스터와 분산 엔진을 떠올린다. 하지만 현실의 많은 분석은 수백 MB에서 수십 GB 사이, 노트북 한 대로도 충분히 다룰 만한 규모다. 이럴 때 Spark 클러스터를 띄우거나 데이터 웨어하우스에 올리는 것은 배보다 배꼽이 크다. 그렇다고 pandas로 수 GB Parquet을 집계하자니 느리고 메모리가 터진다. 바로 이 틈을 정확히 메우는 것이 DuckDB다. 흔히 "분석용 SQLite"라 불리는 이 작은 데이터베이스는, 설치도 서버도 없이 내 프로그램 안에서 돌면서 Parquet 파일을 놀랄 만큼 빠르게 SQL로 분석한다. 이 글은 DuckDB가 정확히 무엇이고, 왜 그렇게 빠른지, 어떤 킬.. 2026. 10. 7.
🪣 Amazon S3 완전 정리 — 오브젝트 스토리지의 표준이자 데이터 레이크의 바닥 🪣 Amazon S3 완전 정리 — 오브젝트 스토리지의 표준이자 데이터 레이크의 바닥클라우드에서 "파일을 어디에 저장하지?"라는 질문의 가장 흔한 답이 Amazon S3다. 웹사이트 이미지부터 앱 백업, 로그, 그리고 페타바이트급 데이터 레이크까지, 오늘날 수많은 데이터가 결국 S3 위에 얹혀 있다. 데이터 엔지니어링을 공부하면 Iceberg도, Trino도, 결국 그 데이터가 실제로 놓이는 곳은 S3 같은 오브젝트 스토리지라는 것을 알게 된다. 그런데 S3는 우리가 흔히 아는 '폴더에 파일 넣는 저장소'와는 작동 방식이 근본적으로 다르다. 이 글은 S3가 정확히 어떤 종류의 스토리지인지, 버킷·오브젝트·키 같은 핵심 개념은 무엇인지, 비용을 좌우하는 스토리지 클래스와 11개의 9로 유명한 내구성, 보.. 2026. 9. 29.
반응형

티스토리툴바