GPT-4o로 하루만에 웹사이트 구축하기

뉴스레터의 고도화

최근에 저는 Hello.Stranger라는 뉴스레터를 조금 더 고도화를 하고 구독자님에게 도움이 될만한 것이 어떤게 있을지 고민을 하고 있어요. 몇 가지를 가지고 온다면 이러합니다.

다양한 고민거리 중에서도 3번에 대한 고민을 이번 뉴스레터에서 풀어볼까 해요. 매일 아침에 뉴스레터로 발행하는 Mail에는 📰 IT뉴스 모아보기,✒️ 해외 뉴스 및 토픽, 👨🏻‍💻 오픈소스 소식지 이러한 정보가 포함되어 있어요.

지난 뉴스레터 예시

또한 각 항목에서 소개하는 글들은 적으면 3개, 많으면 5개정도입니다. 물론 처음 뉴스레터를 시작할 때는 "인기있는 몇 가지 이슈들만 선별해서 공유해도 좋겠다"라는 마음이었어요. 하지만 그러기에는 양질의 글들이 너무 많이 있었죠. 그래서 뉴스레터 하단에 추가한 게 🔗 못 다한 이야기들인데, 생각보다 많은 분들이 이 항목에 있는 글들을 찾아주셨어요.

이 못 다한 이야기들의 클릭수가 늘어남에 따라 든 생각이 하나 있었습니다. "뉴스레터에 담고있는 정보들 외에도 다양한 정보를 짧게나마 큐레이션으로 제공을하자." 그래서 이러한 내용들을 담아둘 수 있는 웹사이트를 구축하기로 마음먹었습니다.

웹사이트 구축하기

먼저 말씀드리자면 Local 환경(저의 컴퓨터)에서 개발 및 테스팅을 하는 중에 있습니다. 실제로 외부에 공개가 되는 날이면 구독자님에게 다시 한 번 Noti를 드리도록 하겠습니다.

FrontEnd 개발

웹사이트를 구축하기에 앞서서 어떤 형태가 좋을지 많은 고민을 했어요. 저희는 또 귀찮고 복잡한걸 싫어하니 최대한 심플한 UI를 구성하기로 했고, 각 Article별로 카드형태로 배치하면 좋겠다고 생각했어요.

그리고 페이지는 모바일 사용자들도 편히 볼 수 있게 SPA(Single Page Application)으로 구상했습니다. 메인 페이지에서 스크롤바가 내리면 컨텐츠가 계속 나오는 방식이죠.

이에 구조를 구성하고 프론트엔드 개발자에게 개발을 요청합니다. 네..뭐.. 딱히 개발자는 없습니다. ChatGPT-4o에게 가이드라인을 요청하고 대략적인 개발을 해주면, 사람이 조금 더 디테일한 수정을 하는 방식이에요.

대략 이러한 방식입니다. 제가 vue로 개발을 해본적이 없어서 GPT에게 도움을 많이 받으며 구축을 하게 되더라고요.

(TMI: 저는 GPT-4o를 저렴하게 사용중인데요. 참고삼아 링크를 공유합니다.)

BackEnd 개발

BackEnd는 python을 이용한 개발을 진행했어요. 다행히 python 개발은 지금 것 많은 경험이 있어서 구축에는 큰 어려움이 없었습니다. 하물며 뉴스레터를 처음 시작할 때부터 저의 글쓰기를 도와주는 봇(bot)이 하나 있는데요. 이 봇이 BackEnd 소스코드에 녹여들게 되었어요.

웹서버 엔진 또한 python의 Flask를 활용하여 쉽게 구축했어요. 이런식으로 기존에 있는 코드들을 하나의 프로젝트에 합치니, 제가 만들고자 하는 웹사이트의 Back End가 구축되었어요.

개발중인 웹사이트 맛보기

끝으로 현재까지 개발한 사이트의 일부를 공유드립니다. 메인 페이지는...진짜 손봐야될 것 같은 상황이구요. 그 외의 컨텐츠는 대략 아래와 같이 보여지게 해두었어요.  추후에 사이트 개발이 완료되면 활용할 수 있도록 공유드리겠습니다 :)