첫 페이지 만들기 ① "애플리케이션 설계하기" with Django

장고의 MTV 패턴에 대해 익숙해졌을 것이다.

이제 좀 더 틀을 잡아서 본격적으로 실전에 사용할 수 있는 사이트를 만들어보자.

사용자가 우리 사이트에 접속했을 때, 처음으로 보여주는 페이지를 "홈페이지"라고 하는데, 이런 프로젝트의 첫 페이지를 만드는 것부터 시작한다.

첫 페이지는 사이트 전체의 이미지를 대표하므로, 개성있는 UI 와 일관성 있는 룩앤필이 강조된다.

기능보다는, 디자인 측면이 중요하기 때문에 HTML, 스타일시트, 자바스크립트 등의 지식이 필요한 분야이다.

 

홈페이지 VS 첫 페이지

홈페이지라는 용어는 보통 사용자가 웹 사이트에 접속했을 때, 처음으로 나타나는 문서를 말한다.
하지만, 요즘에는 홈페이지란 용어가 일반화되면서 브라우저로 보는 페이지는 모두 홈페이지라고 통칭되는 경우가 많다. 굳이 구분할 필요가 없는 단어들이다.

첫 페이지 설계하기

화면 UI를 설계하는 템플릿 파일 설계가 주된 작업이고, URL 설계는 아주 간단하다.

부트스트랩 4.3.1버전으로 개발할 예정이므로, 부트스트랩에서 제공하는 컴포넌트에 맞춰 UI를 설계한다.

 

① 화면 UI 설계

이 페이지는 GNB(Global Navigation Bar) 라고 하는 메인 메뉴와 본문, 바닥글로 이루어져있다.

장고의 템플릿 상속 기능을 사용할 예정이고, base.html 과 home.html 두 개 파일을 개발한다는 점을 알아두자.

 

---

② 테이블 설계

테이블 변경사항은 없다.

---

③ URL 설계

프로젝트의 첫 페이지는 루트(/) URL 에 대한 처리 로직을 개발하는 것이다.

그래서 기존 URL에 루트URL만 추가하면 된다.

 

프로젝트 첫 페이지 - URL 설계

URL 패턴	뷰 이름	뷰가 처리하는 내용
/	HomeView(TemplateView)	home.html 템플릿을 보여준다.
/bookmark/		2장과 동일
/blog/		3장과 동일
/admin/		2장과 동일

 

---

④ 작업/코딩 순서

 

프로젝트 첫 페이지 - URL 설계

작업 순서	관련 명령/파일	필요한 작업 내용
뼈대 만들기	startproject settings.py migrate createsuperuser startapp	생략
모델 코딩하기	models.py admin.py makemigrations migrate	생략
URLconf 코딩하기	urls.py	루트(/) URL 정의
뷰 코딩하기	views.py	HomeView 작성
템플릿 코딩하기	templates 디렉터리	home.html 작성, 상속 기능 적용 (base.html)
그 외 코딩하기	static 디렉터리	첫 페이지에 사용되는 이미지 추가

 

---

(다음 포스팅)

2020/09/01 - [Project/첫 페이지 만들기(Django)] - 첫 페이지 만들기 ② "개발 코딩하기" with Django

첫 페이지 만들기 ② "개발 코딩하기" with Django