[팀] 겸상 - 6주차 전체미팅: 화면 레이아웃(220612)

화면 레이아웃

개발자의 품격 4기의 진행상 DB설계는 2주로 잡혀 있었다. 따라서 6주 차에도 DB설계에 대한 발표를 했어야 하나, 우리 팀은 지난주에 DB설계가 통과되어 코멘트받은 몇 가지 부분만 수정하고 바로 화면 레이아웃 설계를 진행하고 그 결과를 6주 차에 발표할 수 있었다. 우리는 한 주간 Quasar라는 CSS 프레임워크를 사용해 화면 레이아웃을 그렸다. 그런데 그 결과는-다른 의미-에서 혹독했다.

이번 프로젝트는 애초에 기술 스택이 프런트엔드는 Vue.js로 백엔드는 Node.js의 express로 정하고 시작되었다. 우리 팀은 Vue.js의 버전 2.0과 3.0 중-부트캠프에서 직접 다뤘던 것이 가장 큰 이유로 작용하여-논의 끝에 3.0으로 결정하였다. 이제 이 버전에 맞는 CSS 프레임워크를 찾아야 하는데 아쉽게도 Bootstrap은-현재까지는-2.0을 지원했다. 검색도 하고 알아본 결과 다소 낯설기는 하지만 Quasar가 Vue.js 3.0 버전을 적극 지원하고 있었고 UI도 이뻤다. 그래서 팀원들은 만장일치 Quasar로 결정했다.

이 글을 쓰고 있는 6월 말인 지금은 Bootstrap으로 작업을 하고 있다. 벌써 3주째다. 반응형을 함께 고려하며 작업하기가 수월해서 만족스럽다. 그럼 Quasar는?

 

피드백에 대한 생각

이번 6주차의 시작은 험악(?)했다. 1팀과 우리 2팀이 DB설계가 빠르게 통과되어 3, 4팀보다 먼저 화면 설계에 들어가게 되었고 그 발표를 6주 차에 하게 되었다. 두 팀은 모두 CS 프레임워크로 Quasar를 채택했고 그 결과물을 발표하게 된 것인데, 발표를 시작하기도 전에 멘토님은 Quasar를 선택한 것에 대한 못마땅함을 꽤 거칠게 피력하셨다. 발표 중에도 그 감정(?)은 가시지 않으셨는지 평가당하는 입장에서는 흠씬 두들겨 맞은 기분이 들었다.

1. 식사 매너 점수 평가는 사용자가 참여한 숟갈 모두를 반드시 평가하도록 해야 한다. 사용자가 불편할 것이라는 이유로 필수가 아닌 선택으로 둔다면 아무도 숟갈에 대한 평가를 하지 않는 서비스가 될 수 있다. 그 결과 이 서비스의 근간이 되는 평가 시스템이 무용한 상황에 처해질 수 있다. 그러면 망한 서비스이다! 매너가 좋은 사람과 나쁜 사람에게만 선택적으로 평가를 한다면 평가를 받지 않은 사람은 어떻게 평가할 것인가? 식사 매너 평가를 필수로 하되 어떻게 편리하게 만들지를 고민해야 할 것이다.
2. CSS 프레임워크로 Quasar는 적절하지 못하다. 그 이유는 첫째, 다른 프런트 프레임워크 사용 시 확장에 제한이 있다. Quasar는 Vue3에 한정적이기 때문에 서비스를 React, Angular, Vue, Svelte 등으로 옮긴다면 다시 처음부터 작업해야 한다. 둘째, Quasar는 국내에서 아직 많이 사용하지 않는다. 따라서 Quasar를 사용한 프로젝트 경험이 경력에 별로 도움이 되지 않을 것이다.

위 내용은 멘토님의 여러 코멘트 중 비중이 컸던 두 가지이다. 1번 코멘트에 대해 우리 팀은 적잖이 당황했다. 그 이유는 매너 평가에 대한 벤치마킹 대상이 당근마켓이었고 선택적 평가의 성공 사례이기 때문에 우리 서비스에도 선택적 평가를 실시하는 것에 대해 아무런 문제의식을 느끼지 못했기 때문이다. 그런데-우리의 공통된 생각과는 너무나도 멀게-멘토님의 반응이 강경하셔서 크게 놀랐다! 위에서 언급하지는 않았지만 모든 유저에게 최고점(5점)을 주고 매너 평가 결과에 따라 깎는 방식도 고려해보라는 피드백도 받았다. 우리는 겸상 서비스가 "자율, 긍정, 함께"라는 키워드와 잘 어울린다고 생각했다. 따라서 무조건 상대를 평가해야 하는 강제성, 점수를 주고 빼앗는 부정적인 방식은 지양해야 할 것이라고 생각한다. 이 생각을 지금도 우리 팀원 모두가 동의하고 공유하고 있어 다행이다! 우선은-멘토님께 배우고 있으므로-참여한 숟갈에 대한 평가는 필수로 하되 UX적으로 편리하고 평가하고 싶게 만들기 위해 고민하기로 하였다.

2번 코멘트에 대해서는 억울한 점도 있다. 이번 발표에서는 완성된 서비스로서의 화면을 보여드린 게 아니라 단지 화면 레이아웃만 그려갔을 뿐인데-완성된 서비스로서-디자인이 이쁘지 않다는 등의 평가를 받았던 점에서 그랬고, 지난 발표 시에 CSS 프레임워크로 Quasar를 쓸 예정이라고 말씀드렸는데 그때는 아무런 코멘트가 없으셨다가 이미 일주일을 Quasar로 써버리고 난 이후에 주신 코멘트라 그랬다. 그렇지만 Bootstrap이 실무에서는 더 많이 사용되고 있는 것도 맞고, 다른 프런트 프레임워크와의 호환을 고려했을 때 Quasar가 아닌 Bootstrap을 선택하는 것이 맞다고 판단해 다시 팀 깃허브에 새로운 프로젝트를 생성하게 되었다. 그래도 한 주간 Quasar로 작업한 게 아까워 지금은 개인 깃허브에 옮겨 두었다. 아래의 그림은 Quasar로 그린 레이아웃 중 일부이다. 피그마에서 그렸던 것과 거의 똑같다!

 

[그림 1] 메인 화면

 

[그림 2] 내가 작업한 숟갈 선택 화면

 

※ 참고: 보고서, 발표자료

개발자의품격4기-2팀-6주차-_개발셋업및화면레이아웃-발표자료.pdf

0.49MB

개발자의품격4기-2팀-6주차-개발셋업및화면레이아웃-보고서.pdf

0.68MB