그누보드 기반 포털형 테마(PC/모바일, 반응형 지원)

프로젝트 소개

안녕하세요! 최근 그누보드5를 활용하여 국내 대형 포털(네이버, 다음) 느낌의 깔끔한 반응형 테마를 제작하고 있어 그 과정을 공유해보고자 합니다.

기존의 정형화된 게시판 형태를 벗어나, 메인 페이지에서 다양한 정보를 한 눈에 볼 수 있는 '포털형 레이아웃'을 목표로 작업했습니다.

주요 기능

1. 포털형 3단/2단 가변 레이아웃

   • 상단(Header): 큼직한 통합 검색창과 관리자 메뉴 설정에서 실시간으로 연동되는 GNB를 배치했습니다.
   • 메인(Body): 좌측 콘텐츠 영역과 우측 사이드바 위젯 영역으로 구분하여 실제 포털과 유사한 정보 밀도를 구현했습니다.
   • 헤더 우측 토글로 라이트/다크 전환, localStorage 저장 + FOUC(깜빡임) 방지 스크립트 적용,핵심 레이아웃(헤더/GNB/위젯/게시판 목록·보기/내용관리 등) 대응
   • 회원별 노출 제외: 광고·헤더배너 등을 특정 회원(mb_id)에게는 노출하지 않도록 설정 가능
   • 다양한 게시판 스킨: 기본형(list) 외에 네이버 카페 스타일(cafe_style), 갤러리형(gallery), 매거진형(webzine) 스킨 포함 (PC/모바일 각각 대응)
   • 이미지 업로드 검증: 로고(SVG 새니타이징), 배너 등 업로드 시 확장자 화이트리스트·용량 제한·실제 이미지 검증을 거쳐 안전하게 저장
   • 통합검색 연동: 통합검색 플러그인이 설치되어 있으면 연동하고, 미설치 시 기본 검색 스킨으로 자동 폴백
   • ToTop 버튼: 스크롤 시 노출되는 맨 위로 이동 버튼 (포인트 컬러 프리셋과 연동)

2. 관리자 설정 중심의 동적 연동

   • 코드를 일일이 수정하지 않아도 관리자 페이지 > 기본환경설정 > 여분필드(1~7)에 게시판 ID만 입력하면 메인 화면의 탭 메뉴와 위젯 게시판이 자동으로 변경됩니다.
   • 게시판 제목까지 DB에서 직접 불러와 테마 설정의 편의성을 높였습니다.

3. 다양한 최신글 UI 제공

• 카테고리 탭 전환 스킨: 뉴스, 스포츠, 연예 등 여러 게시판을 한 영역에서 탭으로 전환하며 볼 수 있습니다.
• 갤러리 블록형 스킨: 썸네일 중심의 포토 뉴스 영역을 구현했습니다.
• 단독 리스트 위젯: 공지사항이나 인기글을 위한 사이드바 전용 디자인을 적용했습니다.

기술적 해결 과정 (Troubleshooting)

작업 중 발생했던 주요 이슈들과 해결 방법입니다.

• PC 환경에서의 모바일 뷰 강제 현상:

  • G5_IS_MOBILE 설정 오류로 인해 PC에서도 모바일 레이아웃이 출력되던 문제를 발견하고, 이를 동적 감지 방식으로 수정하여 완전한 반응형 테마로 전환했습니다.

• Flexbox 내부 테이블 너비 이슈:

  • 사이드바와 메인 콘텐츠를 Flex로 잡았을 때, 게시판 리스트가 유동적으로 좁아지는 현상을 min-width: 0과 table-layout: fixed 속성을 통해 안정화했습니다.

• 그누보드 기본 레이어 간섭 해결:

  • 작성자 사이드뷰나 임시저장 팝업이 페이지 로드 시점에 노출되는 현상을 CSS Specificity(우선순위) 조정을 통해 클릭 시에만 나타나도록 정교하게 제어했습니다

작업 스크린샷

메인 페이지의 전체적인 레이아웃과 네이버 그린 포인트 컬러가 적용된 모습입니다.

좌우 테두리를 과감히 없애고 조밀하게 구성한 게시판 리스트 화면입니다.

사용 방법

• 그누보드5 사이트의 theme 디렉토리로 이동하여 이 저장소를 portal이라는 이름으로 클론(또는 압축 해제)합니다.

git clone https://github.com/tongjookim/Portal-Theme-for-Gnuboard5.git portal
data/ 디렉토리에 웹서버 쓰기 권한을 부여합니다. (테마 설정·업로드 이미지가 저장되는 경로이며, 저장소에는 커밋되지 않습니다 — .gitignore 참고)
chmod -R 707 theme/portal/data

• 그누보드5 관리자 페이지 → 환경설정 → 기본환경설정에서 테마를 portal로 지정하고 저장합니다.
• 최고관리자 계정으로 사이트 홈에 접속하면 우측 하단(또는 상단)에 테마 편집 진입점이 노출됩니다. 편집 모달에서 로고 / 배너 / 헤더배너 / 푸터 / 위젯 / 광고 / 색상을 설정합니다.
• (선택) 메뉴 관리에서 GNB에 노출할 메뉴를 등록합니다. 메뉴가 없으면 관리자에게 등록을 안내하는 문구가 대신 출력됩니다.

향후 계획

• 더 다양한 최신글 스킨(웹진형, 타임라인형) 개발
• 로그인 UI의 네이버 스타일 완성도 향상
• 커뮤니티 활성화를 위한 알람 플러그인 개발 예정
• 특정일에 따라 로고를 가변적으로 바꾸는 로고플래너 개발 예정
• OAuth 플러그인 개발 예정
• 그누보드7 지원 예정

아직 부족한 점이 많지만, 그누보드의 강력한 확장성을 최대한 활용해 보려고 노력 중입니다. 피드백 주시면 개발에 큰 힘이 될 것 같습니다.

감사합니다.