[무료 강의] 154~162쪽 디자인을 갖춘 인테리어 업체 랜딩 페이지 만들기, 사이트 수정을 위한 커서 개꿀팁까지
오늘은 Next.js의 핵심 개념을 짚고, 실제로 인테리어 업체 랜딩페이지를 만들면서 Cursor의 내장 브라우저로 UI를 빠르게 수정하는 방법까지 실습합니다.
[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh
타임라인
0:00 Next.js란 무엇인가 — React의 약점을 보완한 파생 프레임워크
1:06 서버사이드 렌더링(SSR)의 핵심 개념
1:43 React의 빈 화면 문제와 검색엔진 최적화
2:40 기술 이사 — 프레임워크가 바뀌어도 흔들리지 않는 배경지식
3:12 실습 안내: 인테리어 업체 랜딩페이지 만들기
4:07 프로젝트 폴더 생성 및 프롬프트 작성
5:32 목업 데이터로 프론트엔드 화면 구성하기
5:58 디자인 템플릿 적용 및 DESIGN.md 작성
7:36 계획 검토 및 업체 컨셉 기획 (페인트 좌)
10:50 Cursor 내장 브라우저로 UI 요소 선택·수정하기
13:42 셀렉트 엘리먼트 기능으로 세부 디자인 조정
15:19 다크모드·라이트모드 토글 구현 및 수정
16:36 큐 기능으로 작업 중 수정사항 끼워넣기
17:08 마무리
오늘 다룬 내용
- Next.js는 React 기반의 프레임워크로, SSR을 통해 검색엔진 최적화 문제를 해결한다
- React는 빈 화면을 먼저 보여주고 렌더링하지만, Next.js는 미리 완성된 화면을 제공한다
- 기술 프레임워크는 계속 바뀌므로 왜 이동하는지 배경지식을 갖추는 것이 중요하다
- 디자인 템플릿과 DESIGN.md를 활용하면 일관된 UI를 빠르게 구성할 수 있다
- Cursor 내장 브라우저의 셀렉트 엘리먼트 기능으로 원하는 UI 요소를 직접 지정해 수정할 수 있다
- 큐 기능을 활용하면 에이전트 작업 중에도 추가 수정사항을 끼워넣을 수 있다
#NextJS #React #서버사이드렌더링 #SSR #프론트엔드 #웹개발 #커서AI #CursorAI #인테리어사이트 #랜딩페이지 #다크모드 #디자인템플릿 #AI코딩 #코딩입문 #웹사이트만들기 #프론트엔드개발 #리액트 #넥스트JS #AI에이전트 #코딩강의
