[프로젝트 회고] - Cook Create

🍪 프로젝트 시작

삼성청년SW아카데미에서 공통 프로젝트를 진행했다. 웹 기술(웹 RTC), 웹 디자인(SNS), IoT 중 하나를 택해 서비스를 개발해야 했으며, 우리 조(총 6명)는 웹 RTC 기반 프로젝트를 진행하게 되었다.

프로젝트로 선정한 주제는 선생님과 학생의 양방향 소통을 지향하고 핸즈프리 제스처로 유저들의 편의성을 개선한 실시간 피드백 요리 화상 과외 서비스였다. 서비스 명은 'Cook Create'

 

🤔 프로젝트를 하면서 신경 쓴 점

첫 S/W 프로젝트이다 보니, 그간 이론으로 배운 기술들을 사용하는데 중점을 두어 진행하려 했다. 또한, 프로젝트 능률을 올리기 위해 협업에 신경써서 프로젝트를 진행했다.

해당 프로젝트를 진행하며 아래와 같은 사항에 집중해서 프로젝트를 진행했다.

• 문서화
• Jira를 통한 협업

문서화

화면 명세 중 일부

화면 명세 중 회원가입 화면

메인 컬러와 컨셉을 잡은 후의 최종 화면 설계서

 

화면 명세에 시간을 들여 구체적인 디자인을 결정한 덕에, 프로젝트 후반 디자인과 CSS에 소요되는 시간을 대폭 줄일 수 있었다. 또한, 유저 플로우를 손쉽게 확인할 수 있어 UX 개선에 보다 신경쓸 수 있었다.

 

Jira를 통한 협업

첫 주의 번다운 차트

마지막 주의 번다운 차트

 

notion, jira, gitlab 등과 같은 툴을 기반으로 협업하였다. 번다운 차트에서 볼 수 있듯 프로젝트가 진행됨에 따라 업무 관리를 보다 효율적으로 하게 되었다.

 

💡 프로젝트를 하면서 기술적으로 배운 점

삼성청년SW아카데미 1학기 때는 Vue2를 사용했기 때문에 React를 처음으로 배웠다. React는 UI 라이브러리로, React만으로는 라우팅, 스토어 관리들을 할 수 없습니다. 이 때문에 프로젝트에서 React-router-dom과 Redux-Toolkit을 사용하였다.

React를 처음 배우고, 복잡한 프로젝트를 하는 과정에서 여러 에러를 많이 마주했고, 그것을 해결하는 과정에서 많은 것을 배우게 되었다.

FormData에서 이미지 파일 올리기 실패

과외 CRUD를 프로젝트에서 담당했는데, 과외 등록 및 업데이트를 할 때 아래와 같은 form-data 형식으로 Back-End와 통신해야만 했다.

과외 등록 api 예시

 

 

위 gif와 같은 구조로 화면을 설계했으며, 해당 페이지 안에 여러 개의 컴포넌트가 들어있는 구조였다.

해당 기능 개발 초기에는 과외 썸네일 등록 부분도 작은 컴포넌트로 분리되어 있었다. 과외 정보 등록/수정을 할 때마다 redux에 저장된 정보가 바뀌고, 과외 등록을 누르면 모든 정보가 한 번에 formData의 형식으로 Back-End로 보내지는 로직을 설계했다. (각 컴포넌트에서 redux에 정보를 저장하도록 설계했다)

그러나 에러 코드를 반환했다. 알고 보니, redux에 파일을 저장할 수 없었던 것. redux store에 저장될 수 있는 크기가 적다는 것과, redux에 저장한 정보를 분석해보니 file name만 저장되는 것을 알게 되었다. 그래서 redux로 파일 정보를 보내면 안 된다고 판단하였고, 컴포넌트에 넣어 파일을 변경할 때마다 redux 정보를 변경시키는 대신 다른 컴포넌트에 넣지 않고 formData를 만드는 곳에서 썸네일을 올리도록 구현하였다.

그러나 여전히 오류를 직면했고... 그 이유는 formData를 한 번에 append 해서 만들었어야만 했는데, 하단 코드와 같은 방식으로 썸네일을 올리자마자 썸네일을 append하고, 다른 data들은 register 버튼을 누를 때 한 번에 append 되도록 설계해서 문제가 생겼다.

const handleThumbnailUrl = (e) => {
    setLessonThumbnailUrl(e.target.value); // 파일명 유저들에게 보여주기
    const file = e.target.files[0];
    setThumbnailFile(file);
    setThumbnailValid(!!file);
    setThumbnailUrl(URL.createObjectURL(file));
		formData.append("thumbnailUrl", ThumbnailFile);
  };

 

thumbnail을 const로 선언해주고, formData에 한 번에 모든 data를 append 해줘서 문제를 해결할 수 있었다.

const register = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("thumbnailUrl", ThumbnailFile);
    formData.append("lessonTitle", lessonTitle);
    formData.append("categoryId", categoryId);
    formData.append("maximum", maximum);
    formData.append("price", price);
    formData.append("lessonDate", lessonDate);
...

😿 아쉬웠던 점

선생님 유저의 자격증 유무를 통해서 배찌를 부여하고자 했다. 프로젝트 초기 계획은 외부 API를 이용하여 자격증 종류와 번호를 등록하면 공신력 유무를 판별해주는 시스템을 구현하고 싶었으나, 적절한 외부 API가 존재하지 않아 자격증 이미지를 올리고, 관리자 계정으로 배찌 수여 승인/거부를 해주는 기능으로 해당 기능을 마무리했다. 관리자의 번거로움과, 공신력이 떨어질 수 있다는 단점도 아쉬웠으나,  API가 존재하지 않아 개발을 할 수 없었다는 점이 Cook Create 프로젝트를 진행하며 가장 아쉬웠다.

👩🏻‍🍳 느낀점

기술적인 고민은 아니였지만, 프로젝트 진행 도중 가장 힘들었고, 심혈을 기울였던 것은 서비스만의 특장점을 개발하는 것이였다. 기존의 기획은 선생님 유저가 멀리서 요리 영상을 찍고, 학생 유저가 이를 따라하는 방향으로 기획되었다. 그러나 선생님 유저는 요리에 집중하게 되어 피드백을 하게 힘들고, 선명하지 않은 화질 때문에 학생 유저들이 잘 따라할 수 없다는 한계가 존재했다.

이를 극복하기 위해서 서비스의 메인 기획을 크게 수정하였다. 선생님 유저가 피드백에 집중하고, 학생은 요리에 집중할 수 있도록 화면 공유 기능을 도입하고, 핸즈프리 제스처로 UX를 크게 개선시킨데 기여했다는 것이 프로젝트에서 가장 뿌듯했다.

훌륭한 팀원들을 만나서 크게 성장할 수 있어 너무 뜻깊었던 프로젝트였다. 또한, 성공적으로 프로젝트를 잘 마무리하여 결국은 ✨삼성청년SW아카데미✨에서 🎉프로젝트 우수상🎉을 수상했다!