GLOWY(글로위) — 그누보드5 기반 뷰티 SNS 커뮤니티 (노트 그리드·스레드 피드·숏폼·이미지 캐러셀·팔로우/알림)

그누보드5 기반 뷰티 SNS 커뮤니티 — 사진 노트 그리드, 스레드 피드, 세로 숏폼, 팔로우·좋아요·저장·투표·알림

2026-11-09 (월) 23:25:40 조회 21
문의하기 1
GLOWY(글로위) — 그누보드5 기반 뷰티 SNS 커뮤니티 (노트 그리드·스레드 피드·숏폼·이미지 캐러셀·팔로우/알림)
PHP MySQL JavaScript 그누보드5

소개

**GLOWY(글로위)**는 그누보드5 기반 뷰티 SNS 커뮤니티입니다. 스킨케어·메이크업·헤어·네일·향수 이야기를 사진 노트, 스레드 글, 세로 숏폼으로 나누는 서비스로, 샤오홍슈(小红书)·스레드·인스타그램처럼 요즘 SNS에서 익숙한 화면과 기능을 그누보드5 게시판 위에 구현했습니다. 글·댓글·첨부 파일은 그누보드 표준 게시판 구조를 그대로 쓰고, 팔로우·좋아요·저장·투표·알림은 별도 테이블로 확장했습니다.

주요 기능

  • 노트 그리드 · 스레드 피드 — 메인에서 사진 중심 메이슨리 그리드(노트형)와 글 중심 스레드 피드를 전환해 봅니다. 추천/팔로잉 탭, 카테고리 칩(스킨케어·메이크업·헤어·네일·향수·질문·일상), 무한 스크롤을 지원합니다.
  • 다중 이미지 캐러셀 — 사진 2장 이상 글은 다음 사진이 오른쪽에 살짝 보이는 가로 캐러셀로 표시합니다. 모바일은 스와이프·스냅, PC는 화살표·마우스 드래그로 넘기고, 카운터·점 표시, 지연 로딩을 씁니다.
  • 더블탭 좋아요 · 라이트박스 — 사진을 두 번 탭하면 하트 애니메이션과 함께 좋아요, 한 번 탭하면 원본 사진을 크게 봅니다.
  • 숏폼(세로 영상) — 다크 모드 전용 화면에서 세로 영상을 위아래로 넘겨 보며 좋아요·댓글·저장·공유를 합니다. 피드에서는 화면에 보일 때 음소거 미리보기로 자동 재생합니다.
  • 소셜 기능 — 팔로우/팔로워, 좋아요, 저장(북마크), 공유, @멘션, #해시태그, 답글이 달리는 댓글 스레드, 투표 글(기간 설정·실시간 결과)을 지원합니다.
  • 알림 — 좋아요·댓글·답글·멘션·팔로우·투표 알림을 모아 보고, 읽지 않은 알림 수를 메뉴에 배지로 표시합니다.
  • 프로필 — 커버·아바타·소개·피부 타입, 게시물/팔로워/받은 좋아요 통계, 해시태그 하이라이트, 그리드·스레드·답글·저장됨 탭으로 구성합니다.
  • 글쓰기 시트 — 하단 시트에서 사진 여러 장 첨부, 투표 만들기, 카테고리 선택을 한 번에 처리합니다(AJAX 등록).
  • 크리에이터 스토리 · 탐색 — 피드 상단 크리에이터 스토리 레일, 인기 숏폼·추천 크리에이터·지금 뜨는 태그 위젯, 회원·태그·글 통합 검색을 제공합니다.
  • 원클릭 데모 체험 — 로그인 화면의 데모 계정 버튼으로 비밀번호 입력 없이 일반 회원·운영자 화면을 바로 체험할 수 있습니다.
  • 반응형 — PC 1440px(3단: 사이드 메뉴·피드·위젯, 1240px 이하 접힘 메뉴) · 모바일 390px(상단 헤더·하단 탭바) 기준으로 검수했습니다.
  • 샘플 데이터 — 크리에이터·데모 회원 25명, 게시물 239개(사진 글 135개·숏폼 27개·투표 9개), 댓글 994개, 팔로우 203건으로 실제 서비스처럼 시연합니다.

PC 화면

GLOWY PC - 메인 · 노트 그리드(추천 탭·카테고리 칩)

PC · 메인 · 노트 그리드(추천 탭·카테고리 칩·사진 장수 표시)

GLOWY PC - 스레드 피드 · 다중 이미지 캐러셀

PC · 스레드 피드 · 다음 사진이 보이는 이미지 캐러셀, 인기 숏폼·추천 크리에이터 위젯

GLOWY PC - 숏폼 · 세로 영상 다크 모드

PC · 숏폼 · 세로 영상 플레이어(좋아요·댓글·저장·공유, 위아래 넘기기)

모바일 화면

GLOWY 모바일 - 사진 노트 그리드 · 스와이프 캐러셀 · 세로 숏폼 · 내 프로필

모바일 · 사진 노트 그리드 · 스와이프 캐러셀 · 세로 숏폼 · 내 프로필 (390px 기준)

사용 기술

  • 그누보드5 (PHP · MySQL/MariaDB) — 전용 테마·회원 스킨, extend 훅, 표준 게시판 + 별도 테이블(팔로우·좋아요·저장·투표·알림)
  • AJAX API(피드·좋아요·팔로우·댓글·투표·글쓰기·알림), 무한 스크롤
  • 바닐라 JS — CSS scroll-snap 캐러셀, 포인터 드래그, 더블탭 좋아요, IntersectionObserver 영상 자동 재생
  • 반응형 CSS, Pretendard 폰트, SVG 아이콘·로고
  • AI 이미지·영상 생성 도구로 샘플 사진·숏폼·프로필 이미지 제작

데모

https://sample1.oootool.com/ (로그인 화면의 데모 계정 버튼으로 바로 체험할 수 있습니다. 데모 데이터는 주기적으로 초기화될 수 있습니다.)

안내 — 데모 사이트와 이 글에 나오는 회원·크리에이터·게시물·제품은 모두 가상의 샘플 데이터이며, 사진·영상·프로필 이미지는 AI로 생성했습니다. 실존 브랜드·인물과 관련이 없습니다.

oootool.com 맞춤 제작 문의 — 그누보드5 기반 SNS·커뮤니티 사이트 맞춤 제작과 기능 추가를 상담해 드립니다.

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!