#06. ttip(띱) - 메인페이지 전면 개편 & 관리자 배너 시스템 구축

대구 로컬 커뮤니티 서비스 ttip을 개발하고 있는 개발자입니다.

이번 포스팅에서는 ttip의 가장 큰 변화인

메인페이지 전면 개편과 관리자 배너 시스템 구축 과정을 공유합니다.

1. 메인페이지 전면 개편

기존 ttip의 메인페이지는 커뮤니티 피드 중심이었는데,

서비스 방향을 재정의하면서 대대적으로 개편했습니다.

 

1-1 기존 vs 변경

기존: 커뮤니티 피드가 메인, 관/맛집/행사는 배너로만 노출

 

변경: 대구 정보(관광·맛집·행사)가 1순위, 커뮤니티는 2순위

 

1-2 새 메인페이지 구성 (위에서 아래로)

1. 히어로 배너 캐러셀
2. 이번 주 공연·행사
3. 추천 맛집
4. 대구 관광지
5. 커뮤니티 최신글

네이버 지역 페이지나 오늘의집처럼

콘텐츠 중심의 정보 포털 느낌으로 바꿨어요.

 

1-3 기술적 변경사항

** 레이아웃 분리 **

• MainLayout (3컬럼 사이드바) -> 커뮤니티 피드 전용
• PortalLayout (풀 와이드, 사이드바 없음) -> 메인 포털 적용

** 커뮤니티 피드 분리 **

• 기존 / 라우트 -> 포털 페이지
• 신규 / community 라우트 -> 커뮤니티 피드

** HomeController 분리 **

• index(): 포털 데이터만 반환 (배너, 행사, 맛집, 관광지, 최신글 5개)
• community(): 기존 피드 로직 (페이지네이션, 검색, 카테고리 필터)
• mapPost() 공터 헬퍼로 중복 제거

 

** 가로 스크롤 캐러쉘**

• 공연·행사 / 맛집 / 관광지 섹션 모두 가로 스크롤
• 데스크탑: 좌우 화살표 버튼
• 모바일: 터치 스와이프 지원

2. 관리자 배너 시스템

2-1 관리자 기능

• 배너 등록/수정/삭제
• 이미지 파일 업로드 (서버 저장)
• 활성화/비활성화 토글
• 노출 순서 지정
• 시작일/종료일 설정 (필수)

2-1 배너 우선순위

DB 등록 배너 ->> KOPIS 행사 데이터 -> 기본값 순서로 fallback 처리해서

배너가 없어도 항ㅅ아 히어로 섹션이 표시됩니다.

 

2-2 히어로 배너 캐러쉘

단일 배너에서 여러 장을 자동 슬라이드하는 캐러쉘로 변경했습니다.

• 5초마다 자동 슬라이드
• 좌우 화살표 버튼
• 하단 인디케이터 (현재 위치 표시)
• 모바일 터치 스와이프 지원
• 배너 1개면 화살표/인디케이터 미표시

---

마무리
메인페이지 개편은 작업량이 꽤 많았지만
결과물을 보니 이전보다 훨씬 서비스답게 느껴지더라고요.
대구 정보를 찾으러 왔다가 커뮤니티도 자연스럽게 보게 되는
흐름을 만든 게 이번 개편의 핵심이었습니다.
다음 포스팅에서는 통합 검색 기능 구현을 다룰 예정입니다.
ttip 바로가기: https://ttip.kr

ttip - 대구를 더 잘 알고 싶다면