성장하는 제로

독학과정 / 개발 입문기 / 개발공부 등

AI를 활용해 웹개발을 하는 모습입니다.
성장하는 제로

AI 웹 개발 : Cursor로 반응형 쇼핑몰 페이지 구현하기 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 2

1. 이제는 설계에서 구현으로 넘어갈 단계입니다 지난 Part 1에서 우리는 쇼핑몰 페이지가 가져야 하는 구조를 기획하고, UX 흐름과 반응형 기준점(Breakpoint)을 설정했습니다. 이 과정은 초보자나 비전공자에게 특히 중요합니다. 왜냐하면 AI가 코드를 대신 작성해준다고 해도, ‘무엇을 만들 것인가’ 는 사람이 정의해야 하기 때문입니다. 이번 Part 2부터는 기획했던 페이지 구조를 Cursor를 이용해 실제 반응형 HTML·CSS 코드로 구현하는 과정을 […]

AI를 활용해 웹개발을 하는 모습입니다.
성장하는 제로

AI 웹 개발 : 부업용 쇼핑몰 페이지 구조 기획 (초보자·비전공자 실무 강화) | 쇼핑몰 만들기 Part 1

1. 왜 ‘AI 기반 웹 개발, 웹 제작’인가 최근 몇 달 동안 웹 제작 부업 시장에서 가장 빠르게 성장하는 분야는 AI를 활용한 반응형 웹페이지(랜딩페이지) 제작입니다.Cursor, Antigravity, GPT 등 도구들이 등장하면서 코드를 직접 많이 작성하지 않아도 웹페이지 수준이 크게 향상되고 있습니다. 하지만 한 가지 중요한 문제가 있습니다.코드 자체는 AI가 만들어주지만 구조 이해, UX 설계, 반응형 기획은

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS/JS 입문] AI로 만드는 ‘완성형 실무 대시보드’ (GPT vs Cursor vs AntiGravity) | Part 10

지난 시간에 우리는 AI 3총사를 이용해서 실시간 데이터를 활용한 페이징 UI를 만들어 보았습니다. 그리고 3개의 AI에 같은 프롬프트를 입력해서 나오는 결과를 비교해 보았었습니다. 어떠신가요? 이제 조금 알 것 같지 않나요? AI를 어떻게 써야 하는지. 어떻게 효율을 낼 수 있는지 말이죠. 저도 AI 비교 시리즈를 진행하면서 정말 많은 부분을 또 다시 느끼게 되었습니다. 저 스스로가 어떤

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 실시간 데이터·검색/필터·테이블/페이징 UI 만들기 (GPT vs Cursor vs AntiGravity) | Part 9

지난 시간 우리는 AI를 활용해 대시보드 차트 UI를 만들어 보았습니다. 점점 완성되어가는 요소들에 여러분들도 조금씩 재미를 느끼셨을 것이라 생각합니다.또한 이제 어떤 AI가 나와 맞는지, 그리고 어떤 상황에서 어떤 AI를 쓰는게 좋은지 충분히 이해 하셨을 것이라고 여겨집니다. 현대 웹 개발에서 실시간 데이터 업데이트와 사용자 친화적인 UI는 필수 요소입니다. 특히 초급 개발자나 비전공자도 AI 기반 도구를 활용하면

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 대시보드 차트 UI 만들기(GPT vs Cursor vs AntiGravity) | Part 8

지난 시간 우리는 AI 3종(GPT, Cursor, AntiGravity)에게 대시보드를 만들도록 같은 프롬프트를 입력하고 서로 비교분석을 진행했습니다. 굉장히 흥미로운 결과를 볼 수 있었죠. 3종 비교 시리즈를 진행하면서 저 또한 많은 부분이 흥미로웠고 또 알게 되는 부분이 많았습니다. 약간 소름이 돋은 부분은 사람마다 성향이 다른 것 처럼 AI도 성향이 다르다는 것이었죠. 물론 AI도 사람이 개발을 했기 때문에 그렇다는

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 로그인 이후 ‘대시보드 UI’ 만들기 (GPT vs Cursor vs AntiGravity) | Part 7

이전 시간까지 우리는 AI를 활용해 반응형 홈페이지의 로그인 페이지를 만들어 보았습니다. 실습을 하면서 여러분들도 느끼셨을 겁니다. AI의 종류가 이것 말고도 더 있을텐데. 어떤 AI가 어떤 상황에서 유용할까. 나는 어떤 AI와 성향이 맞는걸까. 라는 생각도 드셨을 것이며,어떻게 프롬프트를 짜야할까 라는 고민도 많이 하시게 되었을 겁니다. 정상입니다. 저도 그랬었고 여전히 그렇게 생각하고 있답니다. 이제 우리는 조금 더

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 만드는 헤더·푸터·레이아웃 비교(Gpt vs Cursor vs AntiGravity) | Part 6

지난 시간까지 우리는 AI 3종(GPT vs Cursor vs AntiGravity)을 사용해서 반응형 웹 페이지를 만들어봤고. 세가지 AI가 각자 생성해준 코드와 설명을 비교 분석하고 공부했습니다. 또한 우리는 현대 웹 페이지에서 가장 중요한 “반응형” 에 대한 부분을 배웠습니다. 생각보다 그렇게 어렵지는 않았을 겁니다. 비 개발자로 들어가는 부업러 분들은 현재까지 진행된 내용만 알아도 AI를 다루는 부분과 더해 결과물을 수정하는

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 반응형 UI 만들어보기 (GPT vs Cursor vs AntiGravity) – Part 5

지난 시간까지 우리는 AI 3종(GPT / Cursor / AntiGravity)을 이용해서 바이브 코딩. 즉 직접 코딩하지 않고 AI를 활용해서 코딩하고 반응형 웹페이지를 만들어 보았습니다. 비개발자 입장에서는 이렇게 쉽게 웹 페이지를 만들 수 있다는 사실이 정말 최고였죠. 그와 동시에 개발자 입장에서는 효율과 두려움이 동시에 공존하는 상황을 보여줬습니다. 사실 개발에서 가장 기본이고 처음 입문하는 사람들이 가장 많이 하는

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 로그인 페이지 레이아웃(탭 메뉴) 만들어보기(GPT vs Cursor vs AntiGravity) | Part 4

웹사이트를 만들다 보면 항상 부딪히는 벽이 있습니다.바로 레이아웃(Layout) 과 UI 인터랙션(UI Interaction) 입니다. 이런 질문들은 입문자, 부업러, 개발 전향자 모두가 공통으로 겪는 어려움입니다. 그래서 이번 Part 3에서는 실제 웹사이트에서 가장 자주 쓰이는 ‘탭 메뉴 UI’를 AI 3종(GPT · Cursor · AntiGravity)으로 만들어보고 비교합니다. 저와 함께 또 한걸음 나아가 보시죠! 참고 외부 링크 서비스 링크 ChatGPT

gpt_cursor_antigravity AI 비교
성장하는 제로

[HTML/CSS 입문] AI로 반응형 로그인 페이지 확장하기 (GPT vs Cursor vs AntiGravity) | Part 3

오늘도 출근해서 상사 분들과 이런 저런 이야기를 나눴습니다. 개발 업계에서 20년 조금 넘게 계시는 분께서 이런 말씀을 하시더군요. 이제는 진짜. 반응형 AI의 시대를 넘어서 AI Agent의 시대로 넘어왔어. 그리고 AI개발자도 많이 양산되겠지만. 이제는 GPT, Cursor, AntiGravity 등 AI를 얼마나 잘 다루는 개발자인지가 중요할꺼야. 제가 계속해서 언급하던 그 말과 정확히 동일한 말씀을 하셨습니다. 하물며 과거에는 ‘스마트’

위로 스크롤