🔬프로젝트

<aside> 👨 PAPA-secretary

<aside> ⏰ 개발 기간 - 진행중 (5월14일~진행중)

</aside>

<aside> 🚀 스택 - Next(v15), TypeScript, TailwindCSS(v4), Supabase, Cursor AI, Vercel

</aside>

<aside> 👨‍💻 팀원/담당 - 1명/ 프론트엔드, 백엔드

</aside>

<aside> <img src="notion://custom_emoji/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/1e76b0c5-317e-805d-bb88-007ade027af7" alt="notion://custom_emoji/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/1e76b0c5-317e-805d-bb88-007ade027af7" width="40px" /> GitHub Link

</aside>

목표와 계획

소상공인들에게도 백오피스가 필요합니다. 회계 장부를 보다 편리하게 작성할 수 있는 환경을 제공하고자 하는 목표로 작업했습니다.
소상공인들을 타겟으로 제작한 papa-secretary는 판매 장부를 작성하고 매출액과 이익금을 자동으로 계산해주는 서비스를 지원하고 있습니다. 현재는 단순히 데이터 테이블만 제공하지만 추후 PG사와 연동을 통해 결제 정보를 자동을 기입하는 방식을 도입할 예정입니다. 더 나아가 데이터 기반으로 분석차트를 서비스할 예정입니다.

계층 간 네이밍 컨벤션 통합 및 에러 핸들링 체계 구축

axios기반으로 API를 fetching하고 있습니다. instance와 interceptor를 활용해서 데이터의 요청, 응답 처리를 안정적으로 구현했습니다. API의 필드의 표기문법과 클라이언트에서 사용하는 표기 문법을 맞추기 위해서 문법 표기 변환 함수를 구현 했습니다.
interceptor를 활용해서 예외처리를 함으로 Client에서 API문제, server문제를 즉각적으로 대응하고 문제를 진단, 해결.

정적 타입 강화를 통한 함수 안정성과 재사용성 향상

대부분의 함수를 추상적으로 작성하고 제네릭과, 타입을 꼼꼼하게 작성했습니다. any타입을 사용하지 않게 eslint로 제어하고 명확한 타입을 지정하기 어려울 경우 타입 배리어를 활용해서 안정성을 높였습니다. 타입을 관리하기 위해 types 디렉토리에서 타입들을 관리하고 있습니다.
타입을 세부적으로 작성함에 있어서 반환 타입과 함수를 사용시 필요한 타입이 무엇인지 명확하게 확인할 수 있어서 함수를 이해하고 활용도가 상승.

Supabase 기반 API 설계부터 CORS 해결까지의 엔드투엔드 구현

프로젝트에 clinet와 server를 모두 관리하고 있어서 작업의 효율이 보다 빠르게 이루어 질 수 있었습니다.
- supabase를 활용해서 빠르게 AP I구현, API를 관리하기 위해 MVC 패턴 적용으로 새로운 method를 추가, 테스트 과정까지 하루정도의 시간이 소요, class 방식으로 코드 구현해서 this를 적극 활용.
- ERDClould를 활용해서 현재 데이터 베이스의 단점을 빠르게 파악하고 개선해야할 부분들을 쉽게 파악.
  - 현재 데이터 베이스 구조를 header와 row, cell로 더 세분화 시켜 데이터를 관리 및 확장 예정.
- CORS문제를 해결하기 위해서 NEXT API Routes를 활용으로 인해 현재 작성된 server를 수정하지 않고 CORS 문제를 해결.

QA 적용 전 입력란 디자인

QA 적용 후 입력란 디자인

QA 적용 전 Table 디자인

QA 적용 후 Table 디자인

날짜별 매출을 확인 할 수 있는 슬락이드

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/717a5858-cc88-468d-b4e7-6a5cf5a2339f/SCAPTURE-logo.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/717a5858-cc88-468d-b4e7-6a5cf5a2339f/SCAPTURE-logo.png" width="40px" /> SCAPTURE

<aside> ⏰ 개발 기간 - 3개월 (6월~8월)

</aside>

<aside> 🚀 스택 - React, TypeScript, Recoil, SASS, Vite, ReactQuery

</aside>

<aside> 👨‍💻 팀원/담당 - 7명/ 프론트엔드

</aside>

목표와 방향

MVP를 실제 서비스화를 목표로, 전체적인 리뉴얼 작업 및 고도환된 개발 전략을 수립한 작업입니다.
SCAPTURE는 스타트업에서 진행하는 프로젝트로 현재 참여했던 웹 프로젝트는 SCAPUTRE에서 개발하고 있는 카메라를 통해서 구장에서 운동하는 모습을 촬영, 편집, 녹화까지 제공해주는 서비스를 개발하고 있습니다.

스타트업 초기 프로젝트의 개발 전략 수립 및 협업 프로세스 주도

스타트업 프로젝트의 전반적인 구조 기획
- 다양한 경험과 학습한 과정들을 평소 블로그와 노션, 깃허브에 문서화하는 습관 덕분에 스타트업 프로젝트에 참여 할 수 있는 기회를 얻었습니다. 웹으로 구현 된 것이 없는 상황이라 전반적인 개발 구조를 기여 할 수 있었습니다. 우선 논의를 통해서 깃허브를 중심으로 프로젝트를 관리하며 커밋 컨벤션과 Github-flow전략, Epic, Story, Task, SubTask를 정해서 Waterfall 개발 방법론을 적용하여 개발을 진행 했습니다. 현업에 필요한 전략, 개념을 노션을 통해서 기록, 공유하고 기획과 디자인 백엔드와의 소통을 지속적으로 하고 있습니다. 이뿐만 아니라 기획 의도에 따라 피드백을 받으며 프론트에서 사용할 수 있는 문서화와 여러 전략을 시각적으로 도식화 했습니다.

낙관적 UI를 활용한 마이페이지

마이페이지의 프로필 수정 기능에 낙관적 UI를 도입하여 사용자가 수정 즉시 반영된 것처럼 인지할 수 있도록 구현했습니다. 이를 통해 서비스의 민첩성과 반응성을 강조하고, 기획 의도를 충실히 반영한 사용자 경험을 제공했습니다. 기획 단계에서부터 UI/UX 시나리오를 분석하고 구현 방향을 제안하며, 실질적인 피드백 속도를 향상시켰습니다.

동시성 예약 문제 대응을 위한 디자인 패턴 및 낙관적 UI 설계

JS의 싱글스레드 특성상 클라이언트에서는 데드락이 발생하지 않지만, 구장 예약 시스템에서는 서버 측 동시 요청 시 비점유 상태로 데드락 상황이 발생할 수 있습니다. 이를 해결하기 위해 상태 디자인 패턴을 적용하여 서버의 예약 상태를 실시간으로 시각화하였고, setTimeout을 이용한 낙관적 잠금 해제 전략을 설계했습니다. 클라이언트 레벨에서 서버 상태의 불확실성을 UX로 풀어내는 전략을 팀 내에서 논의 및 적용한 경험이 있습니다.

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/37a9a41d-f3be-45e9-93fb-0a847719ba64/test-removebg-preview.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/3f7fcd19-d4eb-48dc-bca7-7c6b0c183a8e/37a9a41d-f3be-45e9-93fb-0a847719ba64/test-removebg-preview.png" width="40px" /> 시험지 연구소

목표와 방향성

최대한 실무적인 환경처럼 팀 분위기를 만들며, OpenAI를 적극 활용한 작업입니다.
시험지 연구소는 사용자 중심의 효율적인 학습 도구를 제공하는 웹 서비스 입니다. 사용자가 원하는 맞춤형 시험지를 제작할 수 있는 공간을 제공하고 있습니다.

우리들만의 WYSIWYG(위즈윅) 만들기

WYSIWYG(위즈윅) 에디터 라이브러리를 서칭하고 테스트를 해봤지만, 기획과 방향에 맞는 라이브러리가 없었습니다. 특히, 스타일링 적인 부분과 라이브러에서 제공되는 효과 버튼들을 클라이언트 레벨에서 제어하기 어려웠습니다. 그래서 도달한 결론은 라이브러리를 사용하지 않고 직접 WYSIWYG(위즈윅) 에디터 라이브러리를 직접 개발 했습니다.

AI 기반 문제 자동 생성 시스템과 MD포맷을 HTML 변환 로직 구현

클라이언트가 직접 정리한 학습용 PDF 파일을 AI에 업로드하면, 해당 내용을 기반으로 문제와 해설을 자동 생성하고, 이를 프론트엔드에서 구현한 UI/UX 컴포넌트에 맞춰 CRUD가 가능한 문제지 형태로 출력할 수 있도록 구현했습니다. AI 응답은 Markdown 포맷으로 받아오며, 이를 HTML로 변환하는 렌더링 함수를 별도로 구현했습니다. 또한 이미지가 삽입되어야 하는 위치는 워터마킹 문구로 표기하고, 클라이언트에서는 이를 탐지하여 HTML 이미지 태그로 자동 치환하는 로직도 함께 구현했습니다.

팀의 소통문제를 극복하기 위한 노력

FE팀원들과 현재 컴포넌트의 상황을 분석하고자 컴포넌트를 도식화 해서 회의를 진행하고 현재 문제 상황을 파악했습니다.
디자이너와의 지속적인 소통을 주도했습니다. 정기적인 회의를 주관하며 프로젝트의 진행 상황을 공유하고 UX적인 문제점들을 논의했습니다.
UI/UX 고찰을 했습니다. 사용자 경험을 최적화하기 위해 UI/UX에 대한 심도 있는 고찰 했고 UIUX 시나리오가 중요하다는 것을 알게되는 경험이였습니다.

</aside>