[싸피에서 뭐했니?] #2학기_특화프로젝트_회고

안녕하세요~!! 11기 최민주 기자입니다 👋

 

특화 프로젝트란?
4차 산업 혁명 분야 중 본인이 흥미 있는 특화 기술을 익히 신기술 프로젝트를 진행하는 과정. 도메인으로는 크게 AI, 빅데이터, 블록체인, 핀테크, 메타버스 등이 있으며, 해당 도메인 안에서도 세분화되어 나누어집니다.

 

어떤 프로젝트를 진행했나요?

저희 팀은 AI 도메인을 선택하여 'AI를 활용한 작품 관리 플랫폼'을 개발했으며, 주요 기능은 다음과 같습니다.

시나리오 관리 - 설정 오류 체크, 코르크보드, 글자수 체크, 맞춤법 검사, AI를 통한 표지 이미지 생성
인물관계도 - 인물관계설정, 등장회차추출
세계관 - AI를 통한 세계관 이미지 생성
작가 관리 - 활동 글자수 계산 및 시각화

 

원고 관리 화면

 

얻은 것

처음으로 프론트엔드 개발을 담당하며 얻은 것은 아래와 같습니다.

 

1. 컴포넌트 기반 아키텍처 활용

React의 컴포넌트 기반 아키텍처를 활용하여, UI를 작은 단위로 나누어 재사용 가능한 컴포넌트를 설계하는 방법을 익혔습니다. 또한, 컴포넌트를 모듈화하여 각자의 역할을 분담해 작업을 효율적으로 진행할 수 있었습니다.

 

2. UI의 동적인 요소 이해

React DnD를 사용하여 코르크보드 기능을 개발하면서, UI의 동적인 요소들이 어떻게 효과적으로 작동할 수 있는지에 대해 이해할 수 있었습니다. 사용자가 항목을 드래그하고 드롭할 때 상태 전이가 자연스럽게 이루어질 수 있도록 하였고, 이를 통해 보다 인터랙티브한 사용자 경험(UX)을 제공할 수 있다는 것을 배웠습니다.

 

3. 상태 관리

메뉴탭 기능을 개발하면서, 여러 컴포넌트에서 동일한 탭 선택 상태를 유지해야 했기 때문에 Zustand를 사용하여 전역 상태 관리를 간편하게 처리했습니다. 이를 통해 상태 관리가 필요한 이유를 실감하게 되었으며, 탭 전환이나 다른 컴포넌트의 상태 변화가 실시간으로 UI에 반영되는 작업을 간소화할 수 있었습니다.

 

4. 백엔드와의 통신 흐름 이해

React에서 비동기 API 호출을 통해 데이터를 가져오고, 이를 컴포넌트 상태에 반영하는 과정을 경험했습니다. 또한, 백엔드 API에서 받아온 데이터를 상태 관리와 결합하여 화면에 반영하는 작업을 하면서 프론트엔드와 백엔드 간의 상호작용을 보다 명확히 이해하게 되었습니다.

 

5. SPA 이해

Single Page Application(SPA)는 하나의 페이지에서 동적으로 모든 기능을 처리하는 웹 애플리케이션 아키텍처입니다. React 라이브러리를 사용하면 페이지 전환 시 서버로부터 전체 페이지를 다시 불러오는 대신, 필요한 데이터만 비동기로 받아와 DOM을 업데이트할 수 있습니다. 이를 통해 네트워크 트래픽을 줄이고 페이지 로딩 속도를 개선할 수 있음을 배웠습니다.

 

아쉬웠던 점

초기 설계 단계에서 백엔드와 변수명과 타입 등을 미리 조율하지 못해, 개발 도중에 이를 수정해야 했던 부분이 아쉬웠습니다. 이를 통해 사전 설계와 팀 간 의사소통의 중요성을 다시 한 번 깨달았습니다.

 

추후 진행해야할 사항

현재 싸피에서의 마지막 프로젝트인 자율 프로젝트를 앞두고 있는데요, 저희 팀은 자율 프로젝트에서 기존 프로젝트를 고도화하기로 했습니다! 특히 MSA 전환을 통해각 서비스가 독립적으로 배포되고 확장될 수 있도록 설계하여, 시스템 전체의 복잡도를 줄이고 유연성을 확보하려고 합니다. 이를 통해 장애 발생 시, 특정 서비스에만 영향을 미치게 하여 전체 시스템의 안정성을 높일 계획입니다 :)

 

총평

처음으로 프론트엔드 개발에 도전하며 새로운 기술을 배우고 UI/UX 설계부터 백엔드와의 통신까지 많은 성장을 이뤄냈던 프로젝트!

 

그럼 다음 기사로 만나요, 안녕-! 💨