Django의 Front-End 구성에 관한 얘기를 계속 이어 보겠습니다.
제가 Django를 처음 접했던 게 유튜브 컨텐츠를 통해서였고, 그때가 말그대로 본격적으로 HTML과 CSS를 만지기 시작한 최초의 순간이었습니다.
말을 좀 멋드러진 수사를 쓰긴 했지만, 말그대로 Front-End 코딩 Newbie도 아니고, Noob 였다고 해야되는 수준이었습니다.
그 전엔 PyQt5를 통해 GUI의 구성방식과 click event를 listening한다던가 하는 아주 처절하게 기본적인 개념을 대강 머릿속 어딘가에 때려 넣어 놓고 있던 때였습니다.
그래도 다행인건, PyQt5를 통해 쌓았던 것들이 많은 도움이 되어서 개념을 연결하고 이해하는데 큰 어려움은 없었던 것으로 기억합니다. 게다가, 든든한 'StackOverFlow'가 있다보니, 일단 뭐든 만들고 보자는 마음만 가지고 Bootstrap theme를 바로 구매하고 작업을 시작했습니다.
역시 코딩은 일단 만들고 봐야 합니다.
특히, Front-End쪽 작업은 수정에 관대합니다.
Back-End가 성능, 보안, 향후 연결성 등등을 고려해 신중하게 수정을 진행해야 하는 반면, Front-End는 말그대로 Back-End에 Data를 input 주고, 결과를 받는 정도이고, 심미성에 입각한 작업이 90% 이상을 이루다 보니, 수정은 너무나도 당연한 작업이라 할 것입니다.
그래서 일단 뭐든 작업하고 보자는 식으로 덤비기에 더욱 좋은 작업영역이라고 해도 과언이 아니겠습니다.
Bootstrap 테마구매가 유리한 경우
Bootstrap 테마는 아래의 링크를 통해서 살펴 볼 수 있습니다.
https://themes.getbootstrap.com/
Bootstrap Themes Built & Curated by the Bootstrap Team.
Bootstrap Themes is a collection of the best templates and themes curated by Bootstrap’s creators. Our collection of templates include themes to build an admin, dashboard, landing page, e-commerce site, application, and more.
themes.getbootstrap.com
이 글을 보시는 분들 중에 워드프레스 작업 경험을 가지고 계신 분들이 있을런지 모르겠습니다.
부트스트랩에서도 워드프레스가 제공하는 것과 같은 테마들을 유료 판매를 하고 있습니다.
무료도 있다지만, 사실상 영업용 사이트 제작을 목표로 가지고 있다면, 작업자가 디자인적인 측면에서 '난' 사람이 아닌 이상은 유료테마를 사는게, 정신 및 육체건강에 매우 이롭습니다.
제가 첫 테마를 구매할 당시보다 동일한 License기준으로 현재는 가격이 50%는 넘게 오른 듯 하지만, 여전히 내가 하나하나 디자인하고 이미지 자료 등을 확보하고 하는 등의 작업을 하는 노력을 투입하는 비용과 비교해 보았을 때, 정말 미친 듯이 저렴하다 하겠습니다.
저는 애초에 디자인적인 측면은 한 수 접은 상태라 부트스트랩의 다양하고 아름다운 테마 페이지를 보자마자 구매를 망설일 이유가 없었습니다. 빠른 작업결과물을 희망한다면, 이것만이 유일하면서도 탁월한 선택이라 하겠습니다.
그런데, 문제는 제가 최초에 부트스트랩 테마를 가지고 Django에 연결해 쓰는 방법에 관련한 한글 Reference를 찾아보려 노력하였지만, 당시엔 그런 Reference가 가뭄에 콩 나듯 했습니다. 유튜브에서도 그랬구요.
설사 있었다 하더라도, Front-End 처음 만져보는 초짜가 제대로 반영이나 했겠습니까.
내가 구현하고자 하는 기능의 결과물은 빨리 보고 싶어 참을 수는 없고.. 그러다 보니, 수도 없는 구글링 + 시행착오 기반 작업수정을 통해 경험을 쌓아나가는 방법 밖에 없었습니다.
지금은 신규페이지일지라도 1페이지 정도는 30분만에도 쥐어짜낼 수 있다지만, 처음 만들 당시에는 Head에 CSS 연결하는 상대경로 설정하는 것부터도 다 허들이었습니다.
하지만, 명백한 것은 일단 익숙해지면 그때부터는 '가지고 노는 단계'로 바로 진입이 가능해 진다는 것입니다.
'가지고 논다'라는 표현이 가능한 것은 Custom에서도 매우 우수하다는 의미이기도 합니다.
마음껏 디자인을 잘라내고 붙여넣고, 이리 옮기고 저리 옮기고, 지지고 볶고, 이 모든게 가능하기에 워드프레스에서 기대하기 어려운 자유도를 맘껏 누릴 수 있다고 하겠습니다.
워드프레스 사이트도 만들어 운영해 본 자로서, 워드프레스의 사용자친화적 디자인 변경 도구들이 좋은 면도 있지만, 안좋은 면이 더 많다고 느끼는 바입니다.
뭔가 좀 더 멋들어진 Custom을 하려면, 바로 구매를 요구하기 때문에, 이 기능 저 기능 필요할 때마다 붙이려다 보면, 생각했던 것보다 금전적 투자가 많이 필요해 집니다. 심지어 그러한 도구들을 또 익혀야 하는 도구학습과정이 필요한데, 의외로 난도가 있다는 점도 애를 먹게 하는 부분입니다.
무엇보다, 기능을 붙일 수록 상상 이상으로 사이트가 무거워짐을 체감하였기에 저는 워드프레스 사이트를 그리 선호하지 않습니다.
그래서 JGTP와 NPUCUS.com도 기존 워드프레스사이트를 던져 버리고, 새롭게 Django 기반으로 올려 버리기도 하였구요. 여하튼 결과적으로 두 번의 고생을 하게 되었기에, 좀 더 자유도 높은 사이트를 바라신다면 워드프레스 사이트는 비추합니다.
이러한 경험을 바탕으로, JGTP에서 곧 무역업체들을 위한 홈페이지 제작서비스를 초특가에 제공하는 패키지를 런칭할 예정입니다.
단순 페이지 1-2개 정도만 필요로 하는 사이트만 구상중이라면 PHP기반 워드프레스 사이트를 통해서도 충분히 목적 달성 가능하시겠지만, 향후 회사의 resource관리, 오더관리, back office 구축 등 여러 기능 추가를 고려하신다면 워드프레스를 선택하시는 것은 그리 좋지 못한 선택이 되실 것입니다.
사이트 개설하실 예정이시면, 반드시 장기적인 관점에서 접근하셔야 합니다.
단순 페이지 로딩만 하고 마는 사이트가 아닌, 중급 이상의 기능을 요구하는 사이트가 향후 필요할 것으로 예상되신다면, 저희 JGTP 쪽으로 문의해 주세요.
당사 관련 사이트 구축만도 벌써 3종을 런칭했고, 타사용 사이트 작업경험도 있기에, 구축비용과 유지비용에서 가장 저렴한 방법을 알고 있고, 해당 노하우를 무역업체들을 위해서라면 아낌없이 사용해 사이트를 구축해 드릴 것입니다.
Django Template 의 구성방식
Django가 처음이신 분들이라면 Template의 구성에서 일종의 Component화를 사용한다는 것을 일단 아셔야 합니다.
공통적으로 사용되는 파트들. 예를 들어, Header Section, Head Section, Footer Section과 같은 공통요소를 매 페이지를 구성할 때마다, 각 개별 페이지별로 모두 HTML 작성하면 어떻게 될까요?
그런 식으로 페이지를 10개 만들었는데, 갑자기, Header 섹션에 심어 놓은 회사 로고를 바꾸고 싶어졌다고 하면, 10개 페이지 각각에 대해 모두 편집을 진행해야 합니다.
하지만, Header섹션을 분리해 공통요소로 HTML 파일을 분절해 놓고, 해당 HTML 파일을 각 페이지 로딩 때 개별요소별로 Loading하는 방식으로 만들어지면, 같은 상황에서 작업자는 분절해 놓은 Header 섹션 HTML 파일 하나만 수정하면 10개 페이지에 공통적으로 즉시 반영되는 효과를 누릴 수 있습니다.
React가 캡슐화된 컴포넌트를 조합해 쓴다는 개념을 가지고 있는 것과 같이, Django Template에서도 그러한 방식을 채택하고 있다 하겠습니다.
해서, 필요한 분절된 섹션은 해당 페이지에 Django Template 언어로, {% include %}를 써서 불러오게 코딩하게 됩니다.
가장 기반이 되는 구조를 아래와 같은 방식으로 짜놓고 시작한다는 것입니다.
<!DOCTYPE html>
<html lang="ko">
{% include 'head.html' %}
{% block content %}
{% endblock content %}
</html>
모든 페이지가 기본적으로 가지게 되는 최상단 DOM구조의 기본틀을 형성시키고,{% block content %}로 잡아 놓은 자리에 목적에 맞게 분절된 HTML 파트를 불러오게 되는 구조입니다.
그리고 각 분절된 파트는 {% extend %}를 통해, 위 기본 구조 페이지로의 연결을 가지게 됩니다.
해서 모든 페이지에 공통되게 사용될 파트는 분절하여 놓고, extend와 include를 통해 연결시켜 사용한다는 것을 먼저, 이해하고, 우리가 각 페이지마다 구현할 내용은 다시 분절된 각 html 파일안에 코딩하게 된다는 기본 이해를 가지고 작업을 착수하면 되겠습니다.
그럼, 다음 포스팅에서 {% block content %}안에 들어가는 내용과 관련하여 계속 상술해 나가 보겠습니다.
NPU(엔피유) 관세사무소
대표관세사 고장주
Tel) 031-986-7190
E-mail) sales@npucus.com
[NPU관세사무소 홈페이지] https://www.npucus.com/
[NPU관세사무소 프로모션 페이지] https://www.tradenpu.com/npu_cus/
[무역비지니스 인텔리전스 서비스 | TradeNPU] https://www.tradenpu.com
[파이썬 실용 예제. 무역과 공공데이터] https://pdatinmylife.tistory.com
Certified Customs Broker JangJu Goh
Executive Customs Broker @ NPU Customs Consulting
CEO @ JG TradePlus
sales@npucus.com
Trade Compliance / Customs clearance management at foreign company
Working experience of Air export freight forwarding
Data Visualization / Independent development of business automation application – copyright of JGPO_Manager, JG Data Center, AutoCC and etc.
B2B consignment & direct export/import, B2C Overseas Buying Office consulting
Alibaba.com B2B trade / taobao B2C trade / Amazon.com global selling etc. Online trade regulation consulting.
Import license / Quarantine
English communication available
[TradeNPU for partnership proposal - JGTP] https://www.tradenpu.com/jgtp/
'파이썬(Python) > TradeNPU' 카테고리의 다른 글
| 관세청 Open API 활용 프로젝트 #1 화물통관진행정보조회하기 (1) (5) | 2024.11.12 |
|---|---|
| 회원사 Item Introduction page 만들기 시리즈 V - ORM (1) (2) | 2024.11.11 |
| 회원사 Item Introduction page 만들기 시리즈 III - Django Template Tags (2) | 2024.11.07 |
| 회원사 Item Introduction page 만들기 시리즈 II - 로그인 구현 (5) | 2024.11.05 |
| 회원사 Item Introduction page 만들기 시리즈 I (9) | 2024.10.22 |