Learning Path
웹사이트를 만들고 싶을 때
화면을 구성하는 기초부터 데이터 처리와 배포까지 큰 그림을 익혀요.
Overview
이 경로에서 배우는 것
웹사이트는 사용자가 보는 화면, 데이터를 처리하는 영역, 실제 인터넷에 공개하는 과정이 연결되어 만들어집니다.
완주하면 프론트엔드와 백엔드의 역할을 구분하고 React와 Next.js로 만든 결과물을 배포하는 전체 흐름을 설명할 수 있습니다.
For whom
이런 분께 추천해요
소개 페이지, 포트폴리오, 업무 도구, 콘텐츠 사이트 같은 웹사이트를 AI와 함께 직접 만들려는 사람에게 적합합니다.
Before you start
시작 전에 확인하세요
- 브라우저에서 웹페이지를 사용하는 기본 경험
- 만들고 싶은 사이트의 사용자와 핵심 기능에 대한 간단한 아이디어
Use cases
이럴 때 활용할 수 있어요
- 반응형 랜딩 페이지 제작
- 검색과 입력이 있는 웹앱 구현
- 로그인과 데이터 저장이 필요한 서비스 배포
Step by step
추천 학습 순서
- 01 용어 보기
프론트엔드(Frontend)
사용자가 보는 화면과 클릭, 입력 같은 상호작용을 담당하는 영역의 범위를 잡습니다.
사용자가 보고 클릭하는 화면과 상호작용을 담당하는 영역. - 02 용어 보기
UI/UX
예쁜 화면을 넘어 사용자가 목적을 쉽게 달성하도록 정보 구조와 행동 흐름을 설계합니다.
사용자가 보는 인터페이스와 제품을 사용하는 전체 경험을 함께 다루는 설계 영역. - 03 용어 보기
리액트(React)
반복되는 화면을 컴포넌트로 나누고 사용자 행동에 따라 바뀌는 상태를 관리합니다.
화면을 컴포넌트 단위로 만드는 자바스크립트(JavaScript) 라이브러리. - 04 용어 보기
Next.js
React에 라우팅과 서버 렌더링, 데이터 처리 규칙을 더해 완성된 웹앱 구조를 만듭니다.
React 기반으로 웹사이트와 웹앱을 만드는 프레임워크. - 05 용어 보기
백엔드(Backend)
인증, 데이터베이스, 외부 API처럼 화면 뒤에서 안전하게 처리할 기능을 구분합니다.
데이터 처리, 인증, 서버 로직처럼 화면 뒤에서 동작하는 영역. - 06 용어 보기
배포(Deploy)
로컬 결과물을 운영 환경에 올리고 도메인, 환경변수, 빌드 오류를 점검합니다.
로컬에서 만든 결과물을 사용자가 접근할 수 있는 환경에 올리는 과정.
FAQ
이 경로에서 자주 묻는 질문
웹사이트를 만들 때 React가 꼭 필요한가요?
단순한 소개 페이지는 HTML과 CSS만으로도 충분할 수 있습니다. 검색, 입력, 로그인처럼 화면 상태가 자주 바뀌거나 반복 UI가 많을 때 React가 유용합니다.
프론트엔드만 배우면 웹사이트를 만들 수 있나요?
정적인 사이트는 가능합니다. 회원 정보나 게시물처럼 데이터를 저장하고 비밀키를 사용하려면 백엔드와 데이터베이스 개념도 필요합니다.