23년도 8월 프로젝트 : 블로그 만들기

1학기때 웹 관련 공모전을 나가고 싶었다.

 

팀을 모으고 뭔가를 해 나가고 싶은 의욕이 정말 넘쳤는데(팀원까지 받았었다).. 막상 내 실력을 생각해보니 딱히 해 놓은 것도 없고, 할 줄 아는 것도 아주 기본적인 것들만 있었다. 

결국 중간고사 등 다양한 이유가 겹쳐 허무하게 포기하였다.

허무하게 목표가 날아가버리니 앞으로 내가 좋아하는 분야에 더 시간을 투자하여 공부하고 포트폴리오를 만들어야 한다는 생각이 들었다.

종강일 부터는 예전에 결제 해둔 인강을 들으며 유튜브 클론코딩을 짜 보았다. 약 한 달 정도의 시간이 걸렸는데, 무언가를 만들기 위한 코드를 어떤 생각을 하면서 짜는지 등을 배웠다. 처음으로 백엔드를 배웠고, Fly.io라는 서비스를 통해 인터넷에 내 웹 페이지를 배포하는 등(그 전까진 NAS가 있어야만 내 웹페이지를 인터넷에 올릴 수 있다고 생각했다) 많은 도움이 된 시간이었다.

또한 여전히 사람들이 많이 쓰는 프론트엔드 기술인 리액트를 배우고 싶어 강의를 들었다. 약 3일만에 인강을 모두 들으며 자신감이 막 붙었을 때, 갑자기 이런 생각이 들었다.

 

"어, 이러면 내 포트폴리오는 클론코딩 하난가?"

 

클론 코딩을 통해 많은 경험을 했긴 했지만 내 스스로 무언가를 짜진 않았다.

인강 선생님이 사용하신 pug로 제작하긴 했지만 이후에 또 내가 pug로 코드를 짤 수 있을 것이란 생각은 들지 않았다.

 

그래서, 지금까지 배운 내용들을 바탕으로 이전부터 꿈꿔왔던 '내 블로그 만들기'를 해보기로 했다.

 

#초기 아이디어

블로그는 내 생각이 담길 수 있어야 한다.

앞으로 만들 프로젝트는 내가 좋아하는 것으로 만들어야 동기부여가 될 것이다.

컴퓨터, 휴대폰 모두 사용하면 좋지만 일단 컴퓨터로 볼 수 있는 웹사이트에 집중해보자.

그래서 생각해본 아이디어는 '싸이월드 클론 블로그'였다.

예전부터 싸이월드의 공책 컨셉이 정말 마음에 들어 언젠가 참고해보고 싶다는 생각이 있었다.

그래서 예전 싸이월드의 사진을 검색해가며(현재 싸이월드 사이트는 운영을 하지 않는 것 같다.) 자료들을 찾았고, 구상도를 그렸다.

 

싸이블로그 구상도1

지금 생각해보면 나름 이 그림과 비슷하게 완성된 것 같다.

기존 싸이월드 틀을 이미지로 가져와서 사용하는 방법과 내가 직접 만드는 것을 고민해 봤는데, 싸이월드 틀의 이미지가 생각보다 좀 노후화됐고(사진 풍화), 나중에 애니메이션을 만들게 된다면 문제가 좀 생길 것 같아 내가 직접 만들기로 했다.

01

초기 아이디어 및 틀 수정

 

처음부터 이런 저런 계획을 짠 다음에 코드를 짜는 방식도 괜찮았겠지만, 나는 바로 무작정 코드를 짜기로 했다.

리액트를 배운지 얼마 되지 않아 잊어버릴까 하는 걱정도 있었고, 개강까지 시간이 많이 남아있진 않아 빨리 끝내버리고 싶었기도 했다.

 

 

 

 

#백엔드 만들기

그런데 가장 큰 문제!

백엔드를 어느 정도 할 줄 안다고 생각했지만.. 막상 실전에서 써보려고 하니 쉽지 않았다.

아쉬운대로 바로 인강을 들으며 만들기로 했다.

코딩애플이라는 사이트에서 또 다른 인강을 들었다!

https://codingapple.com/course/node-express-mongodb-server/

Node.js, MongoDB로 빠르게 웹서비스 만들기 - 코딩애플 온라인 강좌

이렇게 인강을 듣다 중요해 보이는 내용들은 정리해가며 공부했다.

사실 노마드코더때도 했던 것이긴 한데, 이렇게 이론적인 설명도 함께 하게 되니 머릿속에서 착착 정리가 되어가는 느낌이었다!

 

 

#오답노트

인강에서 필요한 부분을 배우면 내 프로젝트파일로 가 실전에 적용시켜보고, 안 되는 부분은 이렇게 오답노트처럼 정리해보기도 했다.

문제점을 글로 적어내니 어떤 부분이 문제인지, 어떻게 하면 될 지 머릿속에 확실히 들어오는 느낌이었다.

그래도 다음엔 노트에 적은 뒤 바로 블로그에도 올려야겠다. 수많은 에러들을 접하고 해결했지만 기록해둔 것이 별로 없어서 아쉬웠다ㅠ

 

 

React로 프론트엔드를, MongoDB(Express)로 백엔드를 다 구성하고 나서 추가적으로 할 것들도 이렇게 적어보았다.

진짜 더럽게 쓰긴 했지만 저 때 나는 최대한 빨리 끝내고 싶어 갈겨쓰고 날려쓰고 그랬다..

아직 저 중에 구현되지 않은 것들도 있는데, 나중에 시간이 남게 되면 해봐야겠다.

 

 

#컨셉

홈페이지에 순발력 게임이 들어가게 된 이유

한동안 홈페이지에 최신 글, 공지 글 말고 뭘 넣을까 고민하였다.

사진, 블로그 소개, 유튜브 등 다양한 생각들이 있었지만 결국 선택은 게임이 되었다.

눈길을 끌 수 있고, 들어온 사람들끼리 경쟁도 할 수 있으며, 무엇보다 이 블로그의 컨셉처럼 '재미있다'

시간이 많이 있었으면 크롬에 있는 공룡게임을 만들고 싶었는데, 개강이 다가온 시점이라 그냥 단순한 순발력 테스트 게임을 넣기로 했다.

 

 

 

블로그 제작이 거의 마무리 되어 갈 무렵, 블로그의 컨셉도 한 번 적어봤다.

블로그를 커뮤니티처럼 꾸며보고 싶다는 생각이 들어 이렇게 썼지만.. 사람들을 끌어모으기엔 많이 부족하다고 생각해 취소했다.

로그인, 회원가입 기능도 만들고 마이페이지까지 만들었지만 아직 계정이 있다고 할 수 있는 것은 딱히 없는 것 같다(댓글다는거 말곤 메리트가 없음..)

 

 

기능 설문조사

예비 사용자들에게 의견을 물어보기도 했다(결국 이 중 아무것도 안했다)

나중에 마이페이지의 기능을 꾸미게 되면 노래 추천정도는 해볼만 한 듯?