The ordinary developer, The ordinary developer,

RAG 챗봇 만들며 AI 개념 귀납적으로 이해하기AI를 공부하다 보면 임베딩(Embedding), 벡터 데이터베이스(Vector Database), ChromaDB, RAG 같은 용어들이 쏟아진다.처음에는 개념부터 공부하려고 했지만, 용어들이 서로 얽혀 있어서 쉽게 머리에 들어오지 않았다.그래서 방향을 바꿨다.Claude Code에게 "RAG 챗봇 만들어줘"라고 요청한 뒤, 생성된 프로젝트 코드를 하나씩 분석하면서 AI의 개념과 구조를 이해해보기로 했다.이번 글은 그 과정에서 정리한 내용이다.프로젝트 구조 살펴보기Claude Code가 생성한 프로젝트 구조는 생각보다 단순했다.PDF 업로드 ↓ingest.py(임베딩 생성 → ChromaDB 저장) ↓사용자 질문 ↓rag_chain.py(..

이미지 생성(Image Generation)과 Diffusion Model 쉽게 이해하기 이미지 생성은 오래전부터 AI 연구의 중요한 분야였다. 최근에는 Midjourney, Stable Diffusion, Imagen 같은 서비스들이 등장하면서 일반 사용자들에게도 익숙한 기술이 되었다.그렇다면 AI는 어떻게 새로운 이미지를 만들어낼까?이미지 생성 모델의 발전 과정Diffusion Model이 등장하기 전에도 이미 다양한 이미지 생성 기술들이 존재했다.1. VAE (Variational Auto Encoder)VAE는 이미지를 압축했다가 다시 복원하는 방식의 모델이다.예를 들어 고양이 사진을 입력하면:고양이 사진↓압축↓복원↓고양이 사진 이 과정에서 모델은 이미지가 어떤 특징을 가지고 있는지 학습한다.즉,..

🎨 Impeccable 명령어 정리✏️ Create — 새로운 것 만들기명령어설명/impeccable craft디자인을 구상하고 바로 구현까지, 하나의 흐름으로 처리/impeccable impeccable모든 명령어의 기반이 되는 핵심 디자인 인텔리전스/impeccable shape만들기 전에 먼저 생각하기. 추측이 아닌 탐색을 통해 디자인 브리프 작성🔍 Evaluate — 평가하기명령어설명/impeccable audit5가지 기술 품질 차원을 P0~P3 심각도로 점검/impeccable critique점수 채점, 페르소나 테스트, 자동 감지를 통한 디자인 리뷰🔧 Refine — 개선하기명령어설명/impeccable animate장식이 아닌 상태 전달을 위한 목적 있는 모션 추가/impeccable..

생성형 AI(Generative AI)란 무엇인가? 🤖 AI와 머신러닝은 같은 개념이 아니다많은 사람들이 AI와 머신러닝을 같은 의미처럼 사용하지만 사실은 조금 다르다.AI(Artificial Intelligence)→ 사람처럼 판단하거나 문제를 해결하려는 기술 전체머신러닝(Machine Learning)→ AI를 구현하는 방법 중 하나딥러닝(Deep Learning)→ 머신러닝의 하위 분야생성형 AI(Generative AI)→ 딥러닝 기반으로 새로운 콘텐츠를 생성하는 기술즉 관계를 단순화하면 다음과 같다.AI > 머신러닝 > 딥러닝 > 생성형 AI 🧠 머신러닝(Machine Learning)이란?기존 프로그래밍은 사람이 직접 규칙을 작성해야 했다.예를 들어 스팸 메일을 구분한다고 하면 이런 식이다..

https://toss.tech/article/will-ai-replace-developers 개발자는 AI에게 대체될 것인가AI가 전문성의 종말을 초래할까요? 끝없이 토론되고 있는 이 질문에 대한 개발자의 개인적인 시각을 공유합니다.toss.tech

✅ Responsive Design Principles — 핵심 10가지1) Fluid Layouts (유동적 레이아웃)px 대신 %, vw, flex, grid 등 상대 단위 사용화면 크기에 따라 자동 재배치되도록 설계2) Flexible Images & Media (유동적 이미지/미디어)max-width: 100%object-fitresponsive image(srcset, sizes)→ 이미지가 레이아웃을 깨지 않도록3) Breakpoints & Media Queries (브레이크포인트와 미디어쿼리)디바이스별로 아니라 콘텐츠가 깨지는 지점 기준으로 설정모바일 → 태블릿 → 데스크탑 순으로 자연스러운 변형4) Mobile-First Approach (모바일 우선)모바일 화면부터 설계하고점점 넓혀가며 ..

13 Game-Changing Performance Fixes Every Front-End Developer Should Knowhttps://medium.com/javascript-in-plain-english/13-game-changing-performance-fixes-that-front-end-developers-swear-by-bc462c1dbfe2

예전에 실무에서 일을 했을 때, pdf나 jpg 파일 링크를 클릭하면 사용자가 다운받게 하는 기능을 만든 적이 있다. 이렇게 보면 매우 간단하지만, PM이 요구한 다음과 같은 조건이 나를 난감하게 했다. 새 탭 열기 없이지정된 파일명으로 다운받아지게 할 것...특히 새 탭 열기 없이 그래서 열심히 서치를 하던 중 Blob의 존재를 알게 됐고, 위 문제를 손쉽게 해결할 수 있게 해주었다.그럼 저 까다로운 조건을 가능하게 해준 고마운 Blob이란 건 뭘까? Blob이란?Blob은 Binary Large Object의 준말로, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 이진(Binary) 형태로 임시 저장할 수 있는 객체다. Blob을 비유하자면 택배 상자와 같다.상자 안에 어떤 물건(데이터)가 들..