Blog/Tech&Hobby 썸네일형 리스트형 [커서AI] 메모 앱(App) 만들기 요새 커서AI 써보면서 바이브 코딩 접하고 있는데 정말 놀랍습니다. (커서AI 설치 및 개발환경 구성은 여기로)간단한 홈페이지 만들기나 간단한 게임 만들기는 딱히 코딩이라 부를 것도 없습니다.html파일 하나 생성해서 간단한 기업 소개 웹사이트를 원 페이지로 구성해 줄래? 흔한 디자인이어도 상관없어. 에이전트 창에 요청 한 줄 날리면, 바로 _ 간단한 홈페이지는 뚝딱이고, 만약에 봐 둔 레퍼런스 디자인이 있다면, AI에게 보여주고 참조해서 만들어달라고 하면 됩니다.HTML, CSS, JaveScript를 써서 인터넷 페이지 상에 간단한 기능(페이지, 앱, 게임 등)을 구현하거나ReACT를 써서 SNS서비스처럼 보이는 화면을 만든다거나, 메모 앱을 만들 수도 있습니다.CRA(Create React App).. 더보기 [커서AI] 설치 및 개발환경(IDE) 준비하기 목차1. 바이브코딩과 CursorAI 소개 2. 참고 도서:『커서AI 30가지 프로그램 만들기』 3. 개발환경 준비 개요 (Python, NodeJS, Git, Cursor) 4. 설치 단계별 안내 5. 마무리 및 다음 글 예고바이브코딩과 커서AI란?바이브코딩(Vibe Coding)최근 주목받는 AI 보조 프로그래밍 방식입니다. 사람이 직접 모든 코드를 작성하기보다, AI가 제안·보완하고 사용자가 조율하면서 개발을 진행하는 흐름을 말합니다. 즉, "AI와 협업하는 코딩"이라고 이해하면 쉽습니다.커서AI(Cursor AI)오픈AI 계열의 모델을 기반으로 한 차세대 IDE(통합개발환경)입니다. 코드 작성, 디버깅, 리팩토링을 AI가 돕기 때문에 초보자도 빠르게 결과를 확인할 수 있고, 숙련자에게도 생산성을 .. 더보기 데일리 행운 버튼(ver.1.250908) 무엇인가요?방문할 때마다 하루 한 번 버튼을 눌러 긍정 메시지를 받는 초경량 위젯입니다. 받은 날은 스트릭(연속일수) 이 올라가고, 다음 날 0시 이후에 새 메시지를 받을 수 있어요. 읽을 거리 없이도 10~20초 안에 미소 한 번 짓게 만드는 작은 장치가 떠올랐습니다. 부담 없이 눌러 볼 수 있어요.어떻게 동작하나요?하루 1회 수령: 버튼을 누르면 오늘의 메시지가 뜹니다.연속 방문 보상: 연속으로 받으면 스트릭 숫자가 올라가요.복사·공유: 마음에 드는 문구는 복사 버튼으로 바로 저장.개인정보 수집 없음: 데이터는 브라우저 localStorage에만 저장됩니다. 더보기 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? 블로그 시리즈 목차: (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? 나름 간결하게 정리하려고는 했지만, 결과적으로는 다소 장황하게 작성된 블로그 글 시리즈를 보면서그러면 제가 하나의 목적을 놓고 그냥 아무렇게나 작성한 프롬프트와나름대로 프롬프트 엔지니어링을 신경써서 작성한 프롬프트는 어떤 차이를 보여주는지를 비교하면 재밌을 것 같아서우선, 한 가지 사례를 만들어 와 봤습니다. 적용 모델은 ChatGPT-5 이고, 입력한 프롬프트.. 더보기 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 블로그 시리즈 목차: (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? AI에게 단순히 “답을 알려줘”라고 묻는 것과, 역할을 부여하고 단계별 사고를 유도하는 것은 결과의 질에서 큰 차이를 만듭니다.롤플레잉(Role-playing) 프롬프트와 단계별 사고 유도(Chain-of-Thought prompting)는 실무 문제 해결, 학습, 기획 등에서 AI를 더 깊이 활용할 수 있게 해주는 핵심 전략입니다.(1) 롤플레잉 프롬프트란?정.. 더보기 (4) 분석과 의사결정 보조 프롬프트 작성법 블로그 시리즈 목차: (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? 이 시리즈는 지금까지 ① 프롬프트 기본 개념 → ② 정보 요약 → ③ 창작·아이디어 발산을 다루었습니다.이번 글에서는 “분석과 의사결정 보조”에 집중합니다. 업무 현장, 학습 과제, 프로젝트 기획에서 AI가 분석을 돕고, 의사결정을 보완하는 방식을 살펴봅니다.AI가 잘하는 부분과 한계AI는 방대한 정보를 빠르게 정리하고, 패턴을 찾아내고, 시나리오를 비교·정리하는.. 더보기 (3) 창작과 아이디어 발산 프롬프트 작성법 블로그 시리즈 목차: (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? 아이디어가 막힐 때, AI를 불러라 창작은 언제나 쉽지 않습니다. 글감이 떠오르지 않거나, 캠페인 아이디어가 막혔을 때 “AI에게 물어보자”라는 생각은 이제 자연스러운 선택이 되었습니다. 하지만 앞뒤없이 그냥 “아이디어 줘”라고 던지면 진부한 답변만 돌아옵니다. 프롬프트를 어떻게 쓰느냐가 창의성의 깊이를 좌우합니다.창의적 프롬프트가 필요한 순간미팅을 앞두고 주요.. 더보기 (2) 정보 정리, 요약 프롬프트 작성법 블로그 시리즈 목차: (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? 넘쳐나는 정보 속에서 길을 찾는 법 뉴스, 보고서, 회의록, 메신저 대화… 하루에도 수십 개의 문서를 마주합니다.문제는 모든 걸 다 읽을 시간이 없다는 것. 이럴 때 요약 프롬프트를 잘 활용하면,“읽을 거리”를 의사결정 가능한 정보로 바꿀 수 있습니다.정보 요약 프롬프트가 필요한 상황20쪽짜리 프로젝트 보고서를 3분 안에 이해해야 할 때회의록에서 내 업무와 관련.. 더보기 (1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 블로그 시리즈 목차:(1) 프롬프트란 무엇이고, 좋은 프롬프트는 무엇인가? 프롬프트 작성법 (2) 정보 정리, 요약 프롬프트 작성법 (3) 창작과 아이디어 발산 프롬프트 작성법 (4) 분석과 의사결정 보조 프롬프트 작성법 (5) 롤플레잉과 단계별 사고 유도 프롬프트 작성법 (6) 생성형AI에 입력하는 프롬프트를 바꾸면 결과가 어떻게 달라질까? “결과물의 80%는 프롬프트 작성법에서 결정된다” 같은 AI모델이라도 무엇을, 어떻게 요청하느냐에 따라 결과가 극적으로 달라집니다. 초보자는 “해줘” 수준에서 막히고, 실무자는 맥락·조건·형식을 설계해 재작업 없는 1차 완성본을 뽑아냅니다. 이 글은 그 차이를 만드는 최소한의 규칙과 바로 써먹을 수 있는 예시를 제공합니다. 프롬프트 엔지니어링이란 말도 있을 정도로 .. 더보기 사진 속 민감한 부분 가리기, 간단하게 해결(ver.1.250901) 이미지 특정 영역 블러 도구 (PC: 드래그앤드롭 가능 / 모바일: 불러오기 버튼 사용) Brush Rect Brush Size: 30px Blur Radius: 10px 블러 적용 다운로드 초기화 이미지 속 특정 영역만 블러 처리하고 싶을 때사진이나 그림을 블로그에 올리다 보면, 가끔은 일부 영역만 흐리게(블러) 하고 싶을 때가 있습니다. 그림에 모자이크처럼 그림 일부를 가려야 하는 경우가 있죠.예를 들어 개인 정보가 담긴 부분이나, 보여주고 싶지 않은 영역 같은 것들이죠.보통은 포토샵이나 전문 툴을 열어야 하지만,이번에는 브라우저에서 바로 쓸 수 있는 블러 도구를 만들었습니다. 기능 소개업로드: PNG, JPG, WEBP, BMP, SVG 파일을 올릴 수 있.. 더보기 이미지 파일 확장자 바꾸기 (PNG,JPG,WEBP,BMP,SVG) ver.1.250828 이미지 확장자 변환기 (원본 해상도 유지 + 파일 크기 제한) 입력: PNG/JPG/WEBP/BMP/SVG → 출력: PNG/JPG/WEBP JPG/BMP 등 투명 미지원 이미지에서도 특정 색을 골라 투명 처리(또는 배경색 치환)할 수 있습니다. 이미지 선택 또는 이 영역으로 드래그 앤 드롭 · 붙여넣기(Ctrl+V) 출력포맷: PNG JPG WEBP 투명색 오차 24 배경색(JPG) 최대 파일 크기: KB ※ 업로드 시 원본 크기로 자동 설정 미리보기(축소) .. 더보기 PNG 그림파일로 파비콘(ICO) 만들기(ver.1.250828) PNG → ICO 파비콘 변환기 PNG 이미지를 올리면 다중 크기의 .ico로 변환합니다. PNG 선택 또는 이 영역으로 드래그 앤 드롭 · 붙여넣기(Ctrl+V) 크기: 16×16 32×32 48×48 64×64 128×128 256×256 이미지 꽉 채우기(잘림 허용, 권장) 초기화 ICO로 변환 파비콘은 웹사이트의 아이콘 내지 로고의 역할을 하는 작은 그림입니다.블로그나 웹사이트를 운영하다 보면 파비콘(favicon) 을 직접 만들어야 할 때가 있습니다.하지만 보통 .ico 파일은 별도의 그래.. 더보기 이전 1 2 다음
