[한화시스템 BEYOND SW 캠프 14기] 15주차 회고 (4/7 - 4/13)

아무래도 난 수액 중독에 걸린 것 같다. -0-
월요일이 되자마자  또 수액을 맞았다.. 몸살이었는데 이젠 진짜 감기를 걸려버렸다.

수액.. 수웩.. swag.. swagger? 아무래도 정신이 이상하다

 

이번 주에는 피그마 발표가 있었다. 우리 팀의 발표자인 Lime의 완벽한 발표로 우리가 전달하고자 하는 바를 모두 완벽하게 전달하였고, 고맙다는 말을 하고 싶다! 피그마로 내가 만든 작품이다! 이제 이 UI를 토대로 프론트엔드와 백엔드도 최대한 연동해 볼 예정이다.

 

왼쪽 사진은 피그마로 스타일 쉐어를 디자인한 사진이고, 두 번째 사진은 HTML, CSS, JS를 Vue를 이용하여 화면을 구현한 사진을 스토리보드로 작성해 놓은 것이다. 유저 정보와 게시물 정보를 연동하여 좋아요 순, 최신순으로 게시물을 조회할 수 있도록 하였고, 제목, 내용, 제목+내용 기준으로 키워드 검색도 가능하도록 기능을 구현해보았다. 이번 프론트엔드 프로젝트는 AI의 의존도가 굉장히 높았다. 프로젝트를 하면서 AI의 능력에 대해 다시 한번 놀라움을 느꼈다.

 

그리고 프로젝트를 진행하는 동안 있었던 일을 적어보자면, 나는 Vuetify를 이용하여 화면을 구현하였고 나머지 팀원들은 CSS를 이용하여 작업하였다. 구현을 마치고 합치는 과정에서 아래와 같은 이슈가 발생했다.

npm install @mdi/font vuetify

설치를 한 뒤, 갑자기 화면이 검은 배경만 나오게 되었다. 이게 무슨 일인가 싶었는데, Vuetify를 설치하면 기본적으로 다크 테마가 적용된다는 사실을 알게 되었고, 다크 테마를 끄자 화면이 정상적으로 출력되었다. 하지만 다시 실행하니 이번엔 배경이 흰색으로만 나오는 문제가 발생했다. 여러 방법을 찾아보니 Vuetify의 배경과 기존 main.css의 스타일이 겹치면서 발생한 이슈였다. Vuetify의 배경 스타일을 덮어씌워 보거나 다양한 시도를 해봤지만, 해결해야 하는 시간이 부족했고 결국 Vuetify로 작업한 코드를 CSS 기반으로 다시 변환하는 불상사가 일어나기도 했다.

 

백엔드와 연동하면서 다시 한 번 느낀 점은, 백엔드에서 API 응답을 할 때 단순히 201 같은 성공 상태 코드만 보내는 것이 아니라, 프론트엔드에서 어떻게 데이터를 활용할지를 고려하여 JSON 형식의 응답을 설계해야겠다는 것이다.

 

좋았던 점

발표자 Lime의 발표가 완벽했고, 피그마 디자인과 프론트엔드 구현이 자연스럽게 이어졌던 점이 좋았다.

 

 아쉬운 점

Vuetify와 CSS를 동시에 사용하는 과정에서 예상치 못한 충돌이 발생했고, 문제 해결에 시간이 오래 걸려 결국 작업을 되돌리는 일이 있었던 점이다.

 

느낀 점

API를 만들 땐 단순한 응답만이 아닌, 프론트에서의 사용성을 고려한 JSON 설계가 중요하다는 점을 깨달았다. 또한 협업 시에는 사용하는 프레임워크나 스타일 가이드의 통일성이 중요하다는 것도 실감했다.