ASST #. 솔로 프로젝트 정리/후기

URL : https://asst.world

3주 전부터 프론트엔드 공부를 진행했다.

이유로는 두 가지가 있는데,  첫 번째는 취업 후 프론트엔드에 대한 이해가 있다면 협업에 도움이 되지 않을까 하는 생각과, 두 번째로는 혼자 온전한 웹 페이지를 만들고 싶다는 이유 때문이었다.

 

1. 기획 의도

이후 인프런을 통해 프론트엔드 강의를 들으면서도, 혼자 산책하며 만들어 볼 웹 페이지에 대해 구상했다.

이윽고 결정내린 페이지 주제는, 간단한 테스트와 한국사, 문학에 대한 개인적인 관심을 융합하여 "나와 성향이 비슷한 조선시대 예술가 찾기"로 기획했다.

개인적인 의견으로 인스타그램에 종종 올라오는 "~~테스트 결과"와 같은 게시물의 등장 빈도가 잦다 보니, 이를 활용하여 웹 페이지에 광고를 달아 수익을 얻는 방법도 좋을 것 같았다.

 

테스트 질문 작성 요령의 경우는 이전에 사회조사 분석사 자격증을 딸 때 공부했던 내용을 활용하면 좋을 것 같았고, 한국사는 자격증이 있지만서도 '조선시대 예술가'에 대해서는 떠오르는 인물이 없다보니 공공 웹 사이트를 활용했다.

 

2. 설계

주제를 정했으니, 기획을 구체화했다.

온전히 혼자 진행하는 것이기에, 충분히 고민하고 찾아볼 시간이 필요해서 7일 정도 야금야금 고민했던 것 같다. 

그리고 해당 기간 동안 아래와 같은 문서들을 작성하거나 구성하며, 기획에 모순은 없는지 스스로 질문했다.

•  성향 구체화
  
  • 테스트로 진단하기 위한 '성향'은 다음과 같이 나누었다.
  • 외향 / 중향 / 내향 => 외내향성에 대한 구분 (예술가의 생애)
  • 이상주의 / 합리주의 / 현실주의 => 삶을 대하는 태도에 대한 구분 (예술가의 작품 메시지)
  • 본능적 사고 / 감성적 사고 / 이성적 사고 => 욕구와 목적을 대하는 태도에 대한 구분 (특정 상황에 대처하는 예술가의 행동)

• 성향에 따른 인물 분석 (27명)
  • 성향에 따라 27명을 분류하는 것이 어려웠지만, 신사임당의 생애를 살펴보고 해당 인물을 기준으로 잡았다. (여러모로 가장 중립적인 인물에 가까웠다.)
  • 데이터는 '한국민족대백과사전'을 사용했다. (Open API를 사용하고 싶었으나, 요청을 보낸지 2주가 지난 지금까지 응답이 없어 출처를 남기는 방식으로 진행했다.)

• 질문 리스트 작성 (15개 (3*5개))
  • 각 성향별 질문 리스트를 작성했다.
  • 이때, 직접적 질문과 무의식적 행동, 특정 상황에서의 성향과 감정, 주변 사람들의 자신에 대한 평가를 골고루 섞어 응답을 받으려했다. 

• 페이지 구성
  • 페이지는 랜딩 페이지 / 질문 페이지 / 결과 페이지로 나누었다.
  • figma를 활용하여 만들었는데, 포토샵 자격증을 취득하던 경험 때문에 많이 어렵진 않았다.
  • 이때 광고를 게시하기 위한 공간도 미리 마련해서 구상하고 이후 CSS도 적용했는데, 막상 구글 에드센스에서는 적용하는 방식이 달라 지금은 의미가 없어졌다. (에드센스에 대해 좀 더 찾아볼 걸...)

• Data flow
  • 각 페이지 별 어떤 버튼과 어떤 액션을 취할지 구상했다.
• ERD 
  • 처음에는 테이블을 일대다로 연결하는 것으로 기획해서 mySQL을 사용하기로 기획했다.
  • 허나 백엔드 개발을 거의 완성했을 때, 통계 데이터를 굳이 일대다로 연결하여 구현하는 것은 불필요하리라는 생각이 들었다.
  • 때문에 결국 테이블이 독립적으로 구성되게 되었는데, 이렇게 될 줄 알았으면 mongoDB를 쓸 걸 그랬다.

• API 명세서
  
  • Data Flow와 ERD를 기반으로 필요하리라 생각하는 API 를 간략히 구상했다.

 

 

3. 개발

3-1. 백엔드

백엔드 개발의 경우는, node.js 와 graphQL을 사용하여 서버를 구축했다.

대부분 간략한 CRUD 기능이라, 내가 사용하지 않을 모듈들이 포함된 nest.js보다 가벼운 환경이 좋을 것이라 판단했고, 한 페이지에서 여러 API를 요청하는 경우가 많을 것으로 우려되어 언더패칭을 막을 수 있는 graphQL을 활용하였다.

이때, schema를 먼저 작성하는 schema-first로 진행했는데, 이 과정에서 프론트엔드 개발할 때 어떻게 데이터를 받는 것이 용이할까 고민하는 재미가 있었다. (하지만 열심히 고민하고, 이후 수정도 많이했다.)

ORM의 경우는 prisma를 사용했는데 typeORM보다 "매우" schema 작성, 테이블 구성이 편했으며, 앞서 언급한 예술가 데이터나 질문 문항 데이터를 쉽게 데이터베이스에 삽입할 수 있는 seed 기능을 활용할 수 있다는 장점이 있었다.

 

3-2. 프론트엔드

프론트엔드 개발을 진행하면서 백엔드에 비해 어려웠던 점이 세 가지 정도 있었다.

첫 번째로는, 반 년 전에 배운 css가 내 생각만큼 움직여주지 않고, 반응형 규격마다 각기 다르게 적용해야 된다는 게 다소 번잡스럽다고 느꼈다. (물론, 완성하고 나면 뿌듯함.)

두 번째로는, 어떤 기능이나 페이지를 위해 만들어야 하는 파일이 너무 많았다. 페이지 하나를 만든다고 하면, container / presenter / queries / styles / types 파일을 각각 만들어 구성해주어야 하며, 서로 간섭하고 엮여 있는 부분이 많았다. 특정 부분을 수정한다고 한다면, 몇 가지씩 수정해야 했으니까.

세 번째로는, 라이브러리 사용이었다. 내 경우, css를 위해 antd 라이브러리를 사용하였는데, 내가 원하는 방식으로 무언가를 수정하려면 어떤 경우에는 "직접" 해당 class 명을 찾아 css를 적용해주어야만 했다. 더 나은 방식이 있는지는 모르겠지만...

4. 배포

배포는 GCP 인스턴스를 통해 docker로 backend, frontend, nginx를 묶어 배포했다. 라우팅 때문에 여러 문제점을 겪었는데, 이는 이전 포스팅에서 다뤘으니 생략한다.

2023.07.05 - [개발/node.js] - Nginx 사용기

 

랜딩 페이지