쇼핑몰 페이지를 구성할 때 가장 핵심적인 섹션은 바로 상품 리스트(Product List)입니다.사용자는 이 영역에서 상품을 발견하고, 비교하고, 구매로 이어지기 때문에상품 리스트의 UI 품질이 곧 전환율로 이어지는 매우 중요한 부분입니다. 이번 Part 3에서는 Cursor AI를 활용하여반응형 상품 리스트와 상품 카드 UI를 실무 수준으로 구현하는 방법을 안내합니다.이 글은 웹 개발에 익숙하지 않은 분들, 비전공자 분들, 그리고 AI를 활용해웹사이트를 […]
1. 이제는 설계에서 구현으로 넘어갈 단계입니다 지난 Part 1에서 우리는 쇼핑몰 페이지가 가져야 하는 구조를 기획하고, UX 흐름과 반응형 기준점(Breakpoint)을 설정했습니다. 이 과정은 초보자나 비전공자에게 특히 중요합니다. 왜냐하면 AI가 코드를 대신 작성해준다고 해도, ‘무엇을 만들 것인가’ 는 사람이 정의해야 하기 때문입니다. 이번 Part 2부터는 기획했던 페이지 구조를 Cursor를 이용해 실제 반응형 HTML·CSS 코드로 구현하는 과정을
1. 왜 ‘AI 기반 웹 개발, 웹 제작’인가 최근 몇 달 동안 웹 제작 부업 시장에서 가장 빠르게 성장하는 분야는 AI를 활용한 반응형 웹페이지(랜딩페이지) 제작입니다.Cursor, Antigravity, GPT 등 도구들이 등장하면서 코드를 직접 많이 작성하지 않아도 웹페이지 수준이 크게 향상되고 있습니다. 하지만 한 가지 중요한 문제가 있습니다.코드 자체는 AI가 만들어주지만 구조 이해, UX 설계, 반응형 기획은
지난 시간에 우리는 AI 3총사를 이용해서 실시간 데이터를 활용한 페이징 UI를 만들어 보았습니다. 그리고 3개의 AI에 같은 프롬프트를 입력해서 나오는 결과를 비교해 보았었습니다. 어떠신가요? 이제 조금 알 것 같지 않나요? AI를 어떻게 써야 하는지. 어떻게 효율을 낼 수 있는지 말이죠. 저도 AI 비교 시리즈를 진행하면서 정말 많은 부분을 또 다시 느끼게 되었습니다. 저 스스로가 어떤
지난 시간 우리는 AI를 활용해 대시보드 차트 UI를 만들어 보았습니다. 점점 완성되어가는 요소들에 여러분들도 조금씩 재미를 느끼셨을 것이라 생각합니다.또한 이제 어떤 AI가 나와 맞는지, 그리고 어떤 상황에서 어떤 AI를 쓰는게 좋은지 충분히 이해 하셨을 것이라고 여겨집니다. 현대 웹 개발에서 실시간 데이터 업데이트와 사용자 친화적인 UI는 필수 요소입니다. 특히 초급 개발자나 비전공자도 AI 기반 도구를 활용하면
지난 시간 우리는 AI 3종(GPT, Cursor, AntiGravity)에게 대시보드를 만들도록 같은 프롬프트를 입력하고 서로 비교분석을 진행했습니다. 굉장히 흥미로운 결과를 볼 수 있었죠. 3종 비교 시리즈를 진행하면서 저 또한 많은 부분이 흥미로웠고 또 알게 되는 부분이 많았습니다. 약간 소름이 돋은 부분은 사람마다 성향이 다른 것 처럼 AI도 성향이 다르다는 것이었죠. 물론 AI도 사람이 개발을 했기 때문에 그렇다는
이전 시간까지 우리는 AI를 활용해 반응형 홈페이지의 로그인 페이지를 만들어 보았습니다. 실습을 하면서 여러분들도 느끼셨을 겁니다. AI의 종류가 이것 말고도 더 있을텐데. 어떤 AI가 어떤 상황에서 유용할까. 나는 어떤 AI와 성향이 맞는걸까. 라는 생각도 드셨을 것이며,어떻게 프롬프트를 짜야할까 라는 고민도 많이 하시게 되었을 겁니다. 정상입니다. 저도 그랬었고 여전히 그렇게 생각하고 있답니다. 이제 우리는 조금 더
지난 시간까지 우리는 AI 3종(GPT vs Cursor vs AntiGravity)을 사용해서 반응형 웹 페이지를 만들어봤고. 세가지 AI가 각자 생성해준 코드와 설명을 비교 분석하고 공부했습니다. 또한 우리는 현대 웹 페이지에서 가장 중요한 “반응형” 에 대한 부분을 배웠습니다. 생각보다 그렇게 어렵지는 않았을 겁니다. 비 개발자로 들어가는 부업러 분들은 현재까지 진행된 내용만 알아도 AI를 다루는 부분과 더해 결과물을 수정하는
지난 시간까지 우리는 AI 3종(GPT / Cursor / AntiGravity)을 이용해서 바이브 코딩. 즉 직접 코딩하지 않고 AI를 활용해서 코딩하고 반응형 웹페이지를 만들어 보았습니다. 비개발자 입장에서는 이렇게 쉽게 웹 페이지를 만들 수 있다는 사실이 정말 최고였죠. 그와 동시에 개발자 입장에서는 효율과 두려움이 동시에 공존하는 상황을 보여줬습니다. 사실 개발에서 가장 기본이고 처음 입문하는 사람들이 가장 많이 하는
웹사이트를 만들다 보면 항상 부딪히는 벽이 있습니다.바로 레이아웃(Layout) 과 UI 인터랙션(UI Interaction) 입니다. 이런 질문들은 입문자, 부업러, 개발 전향자 모두가 공통으로 겪는 어려움입니다. 그래서 이번 Part 3에서는 실제 웹사이트에서 가장 자주 쓰이는 ‘탭 메뉴 UI’를 AI 3종(GPT · Cursor · AntiGravity)으로 만들어보고 비교합니다. 저와 함께 또 한걸음 나아가 보시죠! 참고 외부 링크 서비스 링크 ChatGPT