왜 AI로 ‘일상 기록 페이지’를 직접 만들려고 할까요? 요즘 많은 분들이 사진과 일상을 기록하기 위해 SNS나 메모 앱을 사용합니다.하지만 시간이 지나면 이런 경험을 한 번쯤 하게 됩니다. 특히 커플 기록, 개인 성장 기록, 일상 아카이브처럼“나만의 맥락과 구조”가 중요한 경우에는 기존 서비스가 아쉽게 느껴집니다. 그래서 이번 시리즈에서는 단순한 연습용 페이지가 아니라,실제로 사용할 수 있는 ‘일상 기록 […]
우리는 Part 1 ~ Part 4에서 게시판 구조 설계 → 반응형 레이아웃 → 글/댓글 기능 → 검색·필터·페이징까지 구현해 왔습니다.이번 Part 5는 ‘기능 구현’이 아니라 ‘완성도’를 끌어올리는 단계입니다. 실무에서 “동작은 한다”와 “잘 만든 서비스다”의 차이는 바로 UI/UX 디테일과 코드 품질에서 갈립니다.이번 편에서는 다음 세 가지를 중심으로 게시판을 실제 서비스 수준으로 마무리합니다. Part 5에서 완성할 것 1.
1. 게시판을 “쓰는 공간”에서 “찾는 공간”으로 Part 3까지 진행하면서우리 게시판은 다음 상태가 되었습니다. 하지만 여전히 한 가지 큰 문제가 남아 있습니다. 글이 많아졌을 때,이 게시판을 어떻게 탐색할 것인가? 실제 서비스에서게시판이 불편하다고 느껴지는 순간은 대부분 이때입니다. 그래서 이번 Part 4에서는게시판의 “가독성과 탐색성”을 책임지는 핵심 기능들을 다룹니다. 2. Part 4에서 구현할 기능 정리 이번 글에서 다룰 기능은
1. 이제 게시판이 “동작하기 시작합니다” Part 2까지 진행하면서우리는 게시판을 화면 구조 중심으로 완성했습니다. 하지만 아직까지 이 게시판은사용자가 할 수 있는 행동이 거의 없는 화면입니다. 게시판이 게시판답게 느껴지려면반드시 다음 두 가지가 필요합니다. 이번 Part 3에서는바로 이 두 가지를 다룹니다. 👉 “게시판이 단순한 페이지가 아니라 사용자가 참여하는 공간”이 되는 단계입니다. 2. Part 3의 핵심 목표 정리 이번
1. 이제부터는 “구조를 코드로 옮기는 단계입니다” Part 1에서는 게시판을 코드가 아닌 구조와 흐름으로 먼저 살펴보았습니다.게시판이 단순한 페이지가 아니라, 하나의 작은 서비스라는 점을 이해하는 것이 핵심이었습니다. 이번 Part 2에서는 그 구조를 바탕으로 처음으로 실제 화면을 만들기 시작합니다. 다만, 이 글의 목표는 “예쁜 게시판을 빠르게 완성하는 것”이 아닙니다. AI가 만들어준 코드를 이해할 수 있는 상태로 받아들이는 것
1. AI로 코딩하는 시대, 왜 “구조”부터 봐야 할까요? 최근 AI 도구를 활용한 웹 개발이 빠르게 확산되고 있습니다.Cursor, GPT 계열 도구를 사용하면 HTML과 CSS는 물론, JavaScript 코드까지도 비교적 쉽게 생성할 수 있습니다. 실제로 많은 분들이 이렇게 시작하십니다. 그러면 놀랍게도 바로 실행 가능한 코드가 생성됩니다. 하지만 문제는 그 다음부터 입니다. 이런 상황은 개인 능력 부족이 아니라, 접근
“페이지를 만들 줄 안다”와 “서비스를 만든다”의 차이 앞선 Part 1부터 Part 4까지 우리는쇼핑몰의 구조 기획 → 기본 레이아웃 → 상품 카드 UI → 검색·필터·페이징까지 구현해 보았습니다. 여기까지 왔다면 이런 생각이 드실 수 있습니다. “이 정도면 쇼핑몰 거의 다 만든 거 아닌가요?” 하지만 실제 서비스 관점에서는 아직 결정적인 한 조각이 빠져 있습니다.바로 장바구니와 결제 흐름입니다. 아무리
다시 돌아온 제로입니다.지난 시간 우리는 AI Cursor를 활용하여 쇼핑몰 페이지의 UI와 상품페이지까지 구현을 했습니다.아마 대부분 사람들이 크게 어려움이 없으셨을 것으로 생각이 됩니다. 하지만 쇼핑몰에서 상품을 나열하는 것 만으로는 방문자가 원하는 상품을 쉽게 찾기 어렵습니다.상품이 많아질수록 사용자가 원하는 상품을 바로 찾게 하는 기능은 필수이며,그만큼 UX(User Experience, 사용자 경험)와 전환율에 직접적인 영향을 미칩니다. 이번 Part 4에서는 Cursor
쇼핑몰 페이지를 구성할 때 가장 핵심적인 섹션은 바로 상품 리스트(Product List)입니다.사용자는 이 영역에서 상품을 발견하고, 비교하고, 구매로 이어지기 때문에상품 리스트의 UI 품질이 곧 전환율로 이어지는 매우 중요한 부분입니다. 이번 Part 3에서는 Cursor AI를 활용하여반응형 상품 리스트와 상품 카드 UI를 실무 수준으로 구현하는 방법을 안내합니다.이 글은 웹 개발에 익숙하지 않은 분들, 비전공자 분들, 그리고 AI를 활용해웹사이트를
1. 이제는 설계에서 구현으로 넘어갈 단계입니다 지난 Part 1에서 우리는 쇼핑몰 페이지가 가져야 하는 구조를 기획하고, UX 흐름과 반응형 기준점(Breakpoint)을 설정했습니다. 이 과정은 초보자나 비전공자에게 특히 중요합니다. 왜냐하면 AI가 코드를 대신 작성해준다고 해도, ‘무엇을 만들 것인가’ 는 사람이 정의해야 하기 때문입니다. 이번 Part 2부터는 기획했던 페이지 구조를 Cursor를 이용해 실제 반응형 HTML·CSS 코드로 구현하는 과정을