WattsUp Dashboard Project

최우수상을 수상한 WattsUp Dashboard 프로젝트는 TurbinCrew와 협력하여 에너지 데이터를 시각화하고 거래할 수 있는 웹 서비스를 구축한 프로젝트입니다.
한국전력발전소 API와 MongoDB를 활용하여 실시간 데이터 시각화 및 에너지 거래 플랫폼을 구현했습니다.

담당 역할 : Front-End Development

1. 웹 전체 Design

• Shadcn/ui 및 Tailwind CSS를 활용하여 디자인 시스템을 구축하고 스타일 유지보수를 최적화

• 브랜드 컬러 및 UI 가이드라인을 수립하여 일관된 디자인 적용

• 결과: 스타일 재사용성이 증가하고, 디자인 수정 시간이 단축됨

2. UI/UX 퍼블리싱 (반응형 Tablet, PC)

• Tailwind CSS의 sm, md, lg 브레이크포인트를 활용하여 디바이스 크기에 따라 유동적인 스타일 적용

• React-Fullpage.js를 적용하여 부드러운 페이지 전환 및 직관적인 내비게이션 구현

• 결과: 다양한 기기에서 일관된 사용자 경험 제공 및 반응형 웹 성능 최적화

3. 메인 / 전력거래 / 소개 페이지 컴포넌트 설계

• 공공데이터 API를 연동하여 실시간 발전소 데이터를 조회하고, 이를 Recharts를 활용하여 시각적으로 표현

• Kakao Map API를 활용하여 발전소 위치 및 관련 데이터를 지도 위에 동적으로 표시

• 결과: 지도 기반의 실시간 데이터 시각화를 통해 사용자 이해도를 향상하고, 직관적인 UI 제공

4. 데이터 바인딩

• Zustand를 활용한 전역 상태 관리 및 Framer Motion을 이용한 UI 애니메이션 적용

• Next.js의 SSR(Server Side Rendering)을 활용하여 데이터 로딩 속도 개선 및 SEO 최적화 적용

• 결과: 검색엔진 최적화를 통해 웹 접근성을 향상시키고, 사용자 인터랙션 시 데이터 반영 속도 개선

문제 해결 경험

WattsUp Dashboard 프로젝트의 메인 페이지에서 부드러운 스크롤 전환을 구현하기 위해 초기에는 Fullpage.js를 적용했으나, React 및 Next.js 환경과의 호환성 문제가 발생했습니다.

발생한 문제

• React의 상태 관리와 충돌하여 컴포넌트가 리렌더링될 때 UI가 깨지거나 예상치 못한 동작이 발생.

• Next.js의 SSR(서버 사이드 렌더링) 환경에서 Fullpage.js가 window 객체를 필요로 하여 실행 오류 발생.

• React의 상태가 변경될 때 Fullpage.js가 현재 페이지 상태를 유지하지 못해, 버튼, 애니메이션, 데이터 시각화 등의 UI 요소가 사라지거나 위치가 틀어지는 문제 발생.

• 특정 섹션에서 네비게이션 커스텀이 어려웠고, UI 인터랙션을 추가할 때 제약이 많음.

해결 방법

• Fullpage.js 대신 React-Fullpage.js로 교체하여 React의 상태 관리 방식과 자연스럽게 연결.

• Next.js에서도 안정적으로 동작하며, 추가적인 우회 코드 없이 쉽게 적용 가능.

• 커스텀 네비게이션 및 UI 인터랙션을 보다 유연하게 조정할 수 있도록 개선.

배운 점 및 개선 방향

이번 경험을 통해 라이브러리를 선택할 때 React 및 Next.js와의 호환성을 우선적으로 고려해야 한다는 점을 배웠습니다. 앞으로는 기술 도입 전, 프로젝트와의 적합성을 충분히 분석하여 개발 과정에서 발생할 수 있는 문제를 미리 예방하는 방식으로 접근할 계획입니다.

성과

반응형 UI 개선

• Tailwind CSS의 sm, md, lg 브레이크포인트를 활용하여 모바일, 태블릿, 데스크톱 환경에서 최적화된 UI를 제공.

• 다양한 디바이스에서 레이아웃이 무너지지 않도록 유동적인 스타일 적용 및 미디어 쿼리 활용을 최적화.

• React-Fullpage.js를 적용하여 부드러운 페이지 전환과 직관적인 내비게이션을 제공, 사용자가 스크롤할 때 일관된 경험을 할 수 있도록 개선.

실시간 데이터 시각화 최적화

• 공공데이터 API를 연동하여 실시간 발전소 데이터를 조회하고, 이를 Recharts를 활용하여 데이터를 직관적으로 시각화.

• Kakao Map API를 사용하여 발전소 위치 데이터를 지도 위에서 동적으로 표시하여 사용자들이 위치 기반으로 정보를 탐색할 수 있도록 개선.

• 서버와 클라이언트 간 비동기 데이터 흐름을 개선하여, 실시간으로 변하는 데이터를 빠르게 반영할 수 있도록 최적화.

API 연동을 통한 데이터 동적 처리

• Zustand를 활용하여 전역 상태 관리를 최적화하고, API에서 받아오는 데이터를 효율적으로 캐싱하여 불필요한 API 요청을 최소화.

• Next.js의 SSR(Server Side Rendering) 기능을 적용하여 페이지 로딩 속도를 개선하고, SEO 최적화를 수행하여 검색 엔진 노출도를 향상.

• Framer Motion을 이용하여 UI 요소의 애니메이션을 자연스럽게 적용, API에서 받아오는 데이터가 시각적으로 매끄럽게 반영되도록 구현.

사용 기술

• React, TypeScript, Next.js, Tailwind CSS, React-Fullpage.js, Zustand, Shadcn/ui, Framer Motion, Node.js, Vercel, 공공데이터 API, Kakao 지도 API, VSCode

SurveyGacha Project

SurveyGacha는 기존 ReviewGacha 프로젝트에서 사용자 경험을 개선하고,
기능을 추가 개발하는 것을 목표로 진행된 프로젝트입니다.

Next.js, Tailwind CSS, Supabase를 활용하여
리뷰 공유와 가챠 보상을 결합한 설문 조사 기반의 웹 애플리케이션을 구축하였습니다.

사용자가 설문에 참여할수록 보상을 획득하는 시스템을 도입하여
데이터 수집을 효과적으로 유도하고, 사용자 몰입도를 높이는 구조를 개발했습니다.

담당 역할 : Front-End Development

1. UI/UX 퍼블리싱 (반응형 Mobile, PC) 및 디자이너 협업

• 디자이너와 협업하여 Figma 디자인을 바탕으로 UI를 구현하고, 디자인 시스템을 고려한 컴포넌트 개발

• Tailwind CSS의 반응형 유틸리티를 활용하여 모바일 및 데스크톱 환경에서 최적화된 UI 적용

• 결과: 디자이너와의 원활한 협업을 통해 일관된 UI/UX를 유지하는 개발 방식 습득, 모바일 및 PC 환경에서 사용자 경험 개선

2. 글 작성 / 목록 페이지 컴포넌트 설계

• Next.js 기반의 동적 라우팅을 적용하여 글 작성 및 목록 페이지 개발

• 사용자 편의성을 고려한 폼 UX 설계 및 데이터 유효성 검사 구현

• 결과: 직관적인 인터페이스로 사용자 피드백을 반영하여 콘텐츠 작성 경험 향상

3. 설문조사 페이지 컴포넌트 설계

• 설문 데이터를 효율적으로 처리하기 위해 상태 관리 및 동적 폼 구현

• 설문 참여 후 보상 지급 기능을 고려하여 UX 설계

• 결과: 사용자 참여 유도를 극대화하고 데이터 수집 프로세스를 최적화

4. 데이터 바인딩 (예정)

• Supabase를 활용한 실시간 데이터 저장 및 조회 기능 개발 예정

• API 연동을 통해 설문 응답 데이터를 관리하고, 분석 대시보드 기능 추가 고려

문제 해결 경험

SurveyGacha 프로젝트에서는 설문조사 페이지의 UX를 개선하고, 사용자 경험을 극대화하는 과정에서 몇 가지 문제를 해결해야 했습니다.

발생한 문제

• 설문조사 폼에서 사용자 입력 데이터가 많아질수록 렌더링 성능이 저하됨.

• 상태 관리가 비효율적으로 이루어져 폼 데이터가 일관성 없이 동작하는 문제 발생.

• 설문 응답 데이터 저장 및 조회 시 실시간 업데이트가 원활하게 이루어지지 않음.

해결 방법

• Zustand를 활용하여 상태 관리를 최적화하고, 불필요한 리렌더링을 줄이는 방식으로 성능 개선.

• Next.js의 API Routes를 사용하여 폼 데이터를 서버로 비동기 전송하여 UI의 응답성을 개선.

배운 점 및 개선 방향

이번 경험을 통해 프론트엔드에서 상태 관리와 서버 데이터 연동의 효율적인 방식이 중요하다는 점을 배웠습니다.
앞으로는 대량의 데이터가 입력될 가능성이 있는 UI를 설계할 때, 성능 최적화와 사용자 경험을 고려한 데이터 처리 방식을 더욱 연구할 계획입니다.

성과

반응형 UI 개선 및 디자이너 협업 경험 확장

• Figma 디자인을 바탕으로 디자이너와 협업하여 UI/UX 개선 경험 축적

• Tailwind CSS의 반응형 유틸리티를 최적화하여 다양한 디바이스에서 일관된 UX 제공

설문조사 인터페이스 최적화 및 사용자 경험 향상

• 상태 관리 및 폼 데이터 구조 개선을 통해 설문조사 인터페이스의 응답 속도 최적화

• 보상 시스템을 UX적으로 반영하여 사용자의 참여율을 높이는 UI 설계 적용

API 연동을 통한 데이터 처리 최적화

• Supabase를 활용하여 실시간 데이터 저장 및 조회 기능을 구현

• Next.js의 SSR(Server Side Rendering)을 통해 페이지 로딩 속도를 개선하고 SEO 최적화 적용

사용 기술

• React, TypeScript, Next.js, Tailwind CSS, Supabase, Vercel, Figma, VSCode, Zustand

CARINI Web Project

CARINI는 자동차 구매자를 위한 맞춤형 필터링 및 정보 시각화 기능을 제공하는 웹 서비스입니다.
카카오 챗봇 AI와 Kakao 지도 API를 활용하여 사용자가 원하는 조건에 맞는 차량을 추천받고,
시각화된 정보를 통해 직관적인 비교가 가능하도록 설계되었습니다.
Spring Boot 기반의 백엔드와 연동하여 실시간 데이터 조회 및 저장 기능을 구현했습니다.

담당 역할 : Front-End Development

1. Design

• CSS 및 HTML을 활용하여 UI/UX 디자인을 직접 설계하고 스타일을 구현

• 모든 페이지에 통일감을 주기 위해 일관된 디자인 시스템을 구축하고, 자동차 브랜드 및 테마 색상을 반영

• 결과: 브랜드 아이덴티티를 반영한 UI/UX 설계로 사용자 경험 향상

2. UI/UX 디자인 퍼블리싱

• CSS Flexbox 및 Grid 레이아웃을 활용하여 웹 페이지 구조화

• 반응형 디자인 적용(768px 이상 Tablet, 1024px 이상 PC) 및 크로스 브라우징 대응

• 결과: 다양한 디바이스에서 일관된 UX 제공 및 웹 접근성 개선

3. 데이터 바인딩

• Spring Boot 기반의 MySQL 데이터베이스와 연동하여 차량 정보를 동적으로 불러오는 기능 구현

• Kakao 지도 API를 활용하여 차량 매물 정보를 지도에 시각화

• 결과: 데이터베이스에서 받아온 정보를 UI에 반영하여 직관적인 차량 탐색 기능 제공

문제 해결 경험

CARINI 프로젝트에서는 대량의 차량 데이터를 빠르게 조회하고 시각화하는 과정에서 몇 가지 문제를 해결해야 했습니다.

발생한 문제

• 차량 데이터의 양이 많아질수록 로딩 속도가 느려지는 문제 발생

• 지도 기반의 차량 정보 시각화 시, 마커가 많아지면서 UI 성능 저하

• 필터링된 데이터를 빠르게 반영하지 못해 사용자 경험 저하

해결 방법

• MySQL의 인덱싱 및 쿼리 최적화를 통해 검색 속도 개선

• Kakao 지도 API에서 클러스터링 기법을 적용하여 많은 마커를 효율적으로 처리

• 프론트엔드에서 상태 관리를 최적화하여, 필터 변경 시 빠르게 UI 반영 가능하도록 개선

배운 점 및 개선 방향

이번 경험을 통해 데이터가 많은 경우, 단순한 프론트엔드 최적화뿐만 아니라 데이터베이스 및 API의 효율적인 설계도 중요하다는 점을 배웠습니다.
앞으로는 지도 API 및 대량 데이터 렌더링 성능 최적화 방법을 더욱 연구하여, 사용자 경험을 더욱 향상시킬 계획입니다.

성과

반응형 UI 개선

• CSS Flexbox 및 Grid 레이아웃을 활용하여 디바이스 크기에 따라 유연한 레이아웃 적용

• 크로스 브라우징 테스트를 통해 브라우저별 UI 차이점을 최소화

• 결과 : 다양한 디바이스에서 일관된 UX를 제공하며, 웹 접근성을 개선

차량 검색 및 데이터 시각화 최적화

• MySQL의 인덱싱 및 쿼리 최적화를 적용하여 차량 검색 속도를 향상

• Kakao 지도 API의 클러스터링 기법을 활용하여 지도에서 많은 데이터를 효율적으로 시각화

• 결과 : 데이터 검색 및 탐색 과정이 더욱 직관적으로 개선됨

API 연동을 통한 데이터 동적 처리

• Spring Boot 백엔드와 연동하여 사용자가 검색한 차량 정보를 실시간으로 불러올 수 있도록 구현

• 서버와 클라이언트 간 비동기 데이터 처리를 최적화하여 사용자 경험 향상

• 결과 : API 호출 횟수를 줄이고, 더 빠른 응답 속도로 UX 개선

사용 기술

• Java, JavaScript, Spring Boot, CSS, HTML, MySQL, Kakao 지도 API, Eclipse

CARINI AI Chatbot 프로젝트

CARINI AI Chatbot은 카카오 챗봇 API를 활용하여 자동차 모델 검색, 비교 및 구매 정보를 제공하는 맞춤형 AI 챗봇 서비스입니다.
사용자는 필터링 기능을 통해 원하는 자동차를 쉽게 탐색할 수 있으며,
대화형 인터페이스를 통해 차량 추천 및 세부 정보를 확인할 수 있도록 설계되었습니다.

이 프로젝트는 자동차 구매자의 맞춤형 경험을 제공하기 위해 AI 챗봇과 데이터베이스를 연동하는 것이 핵심 목표였으며,
자동차 데이터 필터링, 대화 흐름 최적화, 사용자 인터페이스 개선 등의 요소를 중점적으로 개발했습니다.

담당 역할 : AI Chatbot Development

1. 데이터 테이블 구성 및 최적화

• MySQL을 활용하여 자동차 모델, 가격, 연비 등 차량 데이터를 구조화하고, 최적화된 데이터 테이블을 설계

• 검색 및 필터링 성능을 고려하여 데이터 인덱싱 적용

• 결과: 데이터 조회 속도를 향상시키고, 챗봇과의 연동을 원활하게 구현하여 검색 성능 개선

2. 데이터 필터링 시스템 구현

• 사용자 입력을 기반으로 맞춤형 자동차 추천 시스템을 개발

• 필터링 옵션(예: 브랜드, 연비, 가격대 등)을 적용하여 검색 정확도를 향상

• 결과: 다양한 조건을 고려한 맞춤형 차량 검색 기능 제공

3. 챗봇 대화 흐름 설계 및 개발

• 카카오 챗봇 API와 연동하여 블록 기반 대화 흐름을 설계하고, 챗봇 시나리오 구성

• 자연스러운 챗봇 인터랙션을 위해 질문 패턴 및 응답 로직을 최적화

• 결과: 사용자 친화적인 대화형 검색 경험 제공 및 고객 응답 정확도 증가

4. 사용자 인터페이스 및 시스템 연동

• Jupyter Notebook을 활용하여 데이터 분석 및 웹 크롤링 테스트 수행

• 구름 IDE에서 챗봇 인터페이스와 백엔드 서버를 연결하는 구조를 설계

• 결과: 챗봇과 데이터베이스 간 원활한 통신을 구현하여 사용자 경험 개선

문제 해결 경험

CARINI AI Chatbot 프로젝트에서는 AI 챗봇과의 데이터 연동 및 차량 추천 기능을 최적화하는 과정에서 몇 가지 문제를 해결해야 했습니다.

발생한 문제

AI 챗봇과 데이터베이스 간 응답 속도 지연

• 자동차 데이터가 많아질수록 검색 쿼리 실행 속도가 느려지는 문제 발생

• 필터링된 데이터가 즉시 반영되지 않아 챗봇 응답 속도 저하

자연스러운 챗봇 대화 흐름 설계의 어려움

• 사용자 입력 값이 다양하여 예외 케이스 처리 및 질문 패턴 설계가 복잡해지는 문제 발생

• 잘못된 입력을 처리하는 에러 핸들링 로직 부족

해결 방법

• MySQL 인덱싱 및 쿼리 최적화를 통해 데이터 검색 속도 개선

• 챗봇 응답 최적화를 위해 Redis 캐싱 적용, 반복되는 데이터 요청을 캐싱하여 응답 속도 향상

• 예외 처리 로직을 강화하여 잘못된 입력에도 자연스럽게 응답할 수 있도록 시나리오 개선

• 대화 흐름을 더욱 직관적으로 만들기 위해 사용자 피드백을 반영한 블록 구조 조정

배운 점 및 개선 방향

이번 경험을 통해 AI 챗봇과 데이터베이스를 연동할 때 성능 최적화가 필수적이며,
사용자의 입력 패턴을 분석하여 대화 흐름을 개선하는 것이 중요하다는 점을 배웠습니다.
향후에는 더욱 정교한 대화 패턴을 적용하고, AI 챗봇의 자연어 처리(NLP) 기능을 추가하여,
보다 스마트한 챗봇 서비스를 구축하는 방향으로 발전시킬 계획입니다.

성과

필터링 기반 차량 검색 기능 구현

• 사용자 입력을 기반으로 한 맞춤형 차량 추천 기능 적용

• 데이터 필터링 로직 최적화를 통해 검색 정확도 향상 및 응답 속도 개선

챗봇 대화 흐름 최적화

• 카카오 챗봇 API와의 연동을 최적화하여 자연스러운 챗봇 인터페이스 제공

• 예외 처리 및 질문 패턴 정리를 통해 사용자 만족도를 높이는 대화 설계 적용

데이터 연동 성능 개선

• MySQL 인덱싱과 Redis 캐싱을 활용하여 챗봇과 데이터베이스 간 응답 속도 단축

• 서버 부하를 최소화하면서 빠른 검색 결과 제공

사용 기술

• Python, Jupyter Notebook, MySQL, 카카오 챗봇 API, 구름 IDE

재고 진열, 판매업 및 계산 등

부모님 가게로, 매니저 역할로 간간히 매장 운영