Seoul Culture

* 이미지를 클릭하여 확대하실 수 있습니다.

프로젝트 소개

• 제작 인원: 2명 (개발 1명, 디자인 1명)
• 제작 기간: 2020.08 — 2020.10

대학교 재학 중 팀 프로젝트로 진행했던 문화공연 정보 공유 서비스를 Vue로 새롭게 만든 프로젝트입니다. Vue의 라이프사이클을 이해하고, 공공데이터를 활용한 비동기 호출과 사용자 중심 UI 기능(슬라이드, 무한 스크롤, 검색 필터)을 직접 구현하는 데 집중했습니다.

주요 구현

공공데이터 API & 백엔드

서울시 문화행사 공공데이터를 JSON 형태로 받아와 카테고리·조건에 맞는 정보를 화면에 표시했습니다. Express.js로 백엔드를 구성하고, Vue Router와 Vuex Store를 연동하여 각 페이지에서 필요한 데이터만 선택적으로 요청하는 구조를 설계했습니다.

Program 섹션 — 슬라이드

매월 진행되는 문화행사 중 인기 있는 행사들을 리스트로 구성하여 화면 중앙에 표시했습니다. API를 통해 받아온 데이터의 길이에 맞게 동적으로 동작하는 슬라이드 기능을 직접 구현했습니다.

What’s ON 섹션 — 라이프사이클 이해

해당 날짜에 진행 중인 문화행사만 필터링하여 특정 2개의 행사를 화면에 표시하는 섹션입니다. 페이지가 렌더링되기 전에 데이터를 요청하고, 응답 처리 후 화면에 반영하는 과정을 통해 Vue의 라이프사이클(created, mounted 등)에 대한 기초적인 이해를 쌓을 수 있었습니다.

검색 필터

많은 문화행사 중 사용자가 원하는 행사를 빠르게 찾을 수 있도록 복합 검색 필터를 구현했습니다. 연주회·전시회 같은 카테고리 분류, 서울 시내 특정 지역 필터, 원하는 날짜 검색을 조합하여 결과를 표시할 수 있습니다.

무한 스크롤

수많은 문화행사를 페이지네이션으로 구성하면 사용자가 페이지를 이동해야 하는 번거로움이 발생한다고 판단했습니다. 대신 스크롤이 일정 위치까지 내려갔을 때 다음 데이터를 자동으로 가져와 화면에 추가하는 무한 스크롤을 구현했습니다.

열람 히스토리

검색이나 리스트에서 특정 문화행사의 상세 정보를 확인한 뒤 리스트로 돌아갔을 때, 이전에 본 행사를 다시 찾아야 하는 불편함을 해결하기 위해 화면 좌측에 히스토리 사이드바를 구현했습니다.

컴포넌트 분리 설계

하나의 컨텐츠 섹션마다 개별 컴포넌트를 구성하여 하나의 파일에 코드가 집중되는 것을 최소화했고, 섹션별로 관련 코드를 묶어 유지보수를 용이하게 했습니다.

배운 점

• Vue의 라이프사이클과 렌더링 타이밍을 실제 데이터 요청과 연결하며 이해했습니다.
• Vuex를 통한 전역 상태 관리와 Vue Router를 활용한 페이지 전환 패턴을 익혔습니다.
• 사용자가 정보를 쉽게 탐색할 수 있도록 포스터·기간·카테고리를 중심으로 UI를 구성하며 정보 설계의 중요성을 체감했습니다.

지금 돌아보면

당시에는 컴포넌트 분리와 비동기 데이터 흐름을 다루는 것 자체가 도전이었지만, 지금 돌아보면 이 프로젝트에서의 “데이터를 가져와서 조건에 맞게 보여준다”는 경험이 프론트엔드 개발의 가장 기본적인 사고 패턴을 형성하는 출발점이었습니다. 현재의 설계 사고—데이터 레이어 분리, 컴포넌트 역할 정의, 사용자 흐름 중심 UI—의 시작은 이 프로젝트에 있습니다.