마더케이몰 매거진 섹션 개발 기록 (1) 게시판을 매거진으로

기본 갤러리 게시판으로는 읽고 싶어지지 않았다 마더케이몰에는 육아 정보와 제품 이야기를 올리는 'MK매거진'이 있었다. 실체는 카페24가 기본으로 제공하는 갤러리 게시판(board_no=8)이었다. 글을 쓰고 목록에 노출하는 기능은 다 있었지만, 화면은 그냥 게시판이었다. 상단에 '이미지형 목록 / 리스트형 목록' 전환 탭이 있고, 글쓰기 버튼과 카테고리 셀렉트 박스가 있고, 그 아래로 폭 86px짜리 작은 썸네일 옆에 제목·작성자·작성일·댓글 수가 한 줄씩 붙는 구조였다. 필요한 건 '게시판'이 아니라 '매거진'이었다. 썸네일이 주인공이고, 제목은 이미지 위에 얹히고, 작성자나 댓글 수 같은 게시판 정보는 보이지 않는 화면이다. 2026년 3월 모바일 스킨 리뉴얼 작업을 하면서 이 게시판을 매거진처럼 보이게 바꾸는 일을 맡았고, 메인 화면에도 매거진 영역을 붙였다. 한 달 뒤에는 PC 스킨에도 같은 구조를 옮겼다. 이 글은 그 시리즈의 첫 번째로, 게시판 스킨을 매거진 레이아웃으로 바꾼 과정을 다룬다. 상단 히어로 슬라이더와 카테고리 탭은 다음 글에서 따로 정리한다. 요구사항과 제약 요구사항 자체는 단순했다. 매거진 목록은 썸네일 중심 카드로 보여 준다. 작성자, 날짜, 댓글 수는 숨긴다. 목록 전환 탭, 검색 폼처럼 매거진에 어울리지 않는 게시판 UI는 없앤다. 글쓰기 버튼은 글을 쓸 권한이 있는 사람에게만 보인다. 메인 화면에도 매거진 최신 글을 카드로 노출하고, 전체 목록으로 가는 링크를 둔다. 어려운 건 제약 쪽이었다. 카페24 스마트디자인에서 게시판 화면은 module="board_list_8" 같은 모듈 블록과 {$subject} , {$img_src} 같은 치환 변수로 구성된다. 서버에서 데이터를 가공할 방법은 없고, 내가 손댈 수 있는 건 모듈 안의 마크업, CSS, 그리고 브라우저에서 도는 JS뿐이었다. 게다가 카페24는 모듈마다 기본 CSS를 함께 불러오기 때문에, 새 스타일을 얹으려면 기본 스타일과 먼저 싸워야 했다. 설계: 모듈은 지우지 않고 숨긴다 처음 결정한 원칙은 "카페24 모듈은 지우지 않는다"였다. 목록 전환 탭( board_listheader_8 ), 글쓰기( board_ButtonList_8 ), 카테고리( board_category_8 ) 블록을 마크업에서 걷어내는 대신, 각 블록 위에 "(CSS 숨김)"이라는 주석을 달고 CSS로 가렸다. 지우면 깔끔하지만, 카테고리 셀렉트처럼 나중에 JS가 값을 읽어야 하는 요소까지 같이 사라진다. 실제로 이 판단은 며칠도 안 돼서 쓸모가 생겼다. 숨겨 둔 카테고리 셀렉트가 이후 카테고리 탭의 데이터 원천이 됐다. 스타일 파일은 두 갈래로 나눴다. 게시판 페이지 ( board/gallery/list.html ): css/module/board/listPackage_8.css 를 매거진 전용 스타일로 통째로 다시 썼다. 메인 화면 매거진 섹션 ( _didy/sections/magazine.html ): 같은 8번 게시판을 Board_ListPackage_8 모듈로 불러오고, 실제 스타일은 메인 리뉴얼용 공통 CSS( didy.css )의 .didy-mag-card 에서 처리했다. 대신 모듈이 함께 부르는 listpackage_8.css 는 "Cafe24 모듈 기본 스타일을 중립화"하는 역할만 하도록 비웠다. 두 번째 파일은 원래 300줄이 넘는 기본 스타일이었는데, 배경과 테두리, 여백, float를 전부 0이나 transparent로 돌려놓는 90줄 남짓한 리셋 파일로 줄었다. 메인 화면의 카드 모양을 바꿀 때 더 이상 카페24 기본 CSS를 의식하지 않아도 되게 하려는 분리였다. 구현 과정과 시행착오 1. 카드 마크업: 링크 하나가 카드 전체를 감싸게 기본 스킨은 썸네일과 제목에 링크가 각각 따로 걸려 있었다. <div class="thumbnail"><a>...</a></div> 다음에 <p class="summary"><a>제목</a>...</p> 가 오는 식이다. 제목을 이미지 위에 겹치려면 이 구조로는 위치 계산이 번거로웠다. 그래서 공지·고정·일반 목록 세 모듈 모두 <a class="mk-mag-card"> 하나가 썸네일과 제목 영역( .info )을 감싸도록 바꾸고, 제목 영역은 position: absolute 로 이미지 하단에 붙였다. .mk-mag-card { display: block; position: relative; border-radius: 12px; overflow: hidden; } .mk-mag-card .thumbnail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* 타이틀 오버레이 (이미지 하단 그라데이션) */ .mk-mag-card .info { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px 12px 14px; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 100%); } .mk-mag-card .info .subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #fff; word-break: keep-all; } 위쪽 48px 패딩에 투명에서 반투명 검정으로 가는 그라데이션을 깔아서, 밝은 사진 위에서도 흰 제목이 읽히게 했다. 제목은 두 줄에서 자르고, 한국어 단어가 중간에 끊기지 않도록 word-break: keep-all 을 줬다. 제목 앞에 카페24가 붙이는 공지·NEW 아이콘 이미지는 카드 안에서는 어색해서 .subject img 를 숨겼다. 문제는 카페24 기본 CSS였다. 목록 모듈은 .thumbType 에 display: table 을, li 에 float 와 고정 폭을 걸어 둔다. 내 그리드가 그 위에서 계속 깨져서, 결국 .mk-mag-grid 와 그 li 에는 !important 를 붙여 display, float, width, margin을 강제로 덮었다. 깔끔한 방법은 아니지만, 모듈이 주입하는 스타일의 우선순위를 내가 통제할 수 없는 환경에서는 이게 가장 확실했다. 2. 2열 그리드에서 단일 열 목록으로 첫 버전은 2열 카드 그리드였다. 공지, 고정, 일반 글이 모두 같은 3:4 카드로 두 줄씩 깔리는 화면이다. 그런데 바로 다음 작업에서 상단에 큰 히어로 슬라이더를 두기로 하면서, 그 아래 목록까지 2열 카드로 빽빽하면 시선이 갈 곳이 없었다. 그래서 목록은 썸네일 아래에 제목과 카테고리가 오는 단일 열 카드( .mk-mag-list , .mk-mag-item )로 바꿨다. 제목 다음 줄에 카테고리 이름이 작게 붙고, 글 사이 간격은 28px로 넉넉하게 뒀다. 썸네일 비율은 생각보다 여러 번 바뀌었다. 목록 카드는 3:2로 시작해서 1:1로, 메인 화면 카드는 3:4로 시작해서 1:1로 정리됐다. 비율이 바뀔 때마다 object-fit: cover 가 잘라 내는 부분도 달라지기 때문에, 실제 글 몇 개를 띄워 놓고 비교하면서 맞춰 갔다. 최종적으로는 슬라이더, 목록, 메인 카드가 모두 1:1로 통일됐다. PC 스킨에서도 4:3으로 잡혀 있던 메인 카드를 1:1로 바꾸고, 회색 배경 대신 흰 배경에 옅은 그림자와 hover 그림자를 줬다. 3. 글쓰기 버튼: 전부 숨겼다가 권한자에게만 돌려주기 처음에는 글쓰기 버튼까지 CSS로 통째로 숨겼다. 매거진은 운영자만 쓰는 게시판이라 일반 고객에게 버튼이 보일 이유가 없다고 생각했다. 그런데 그러면 운영자도 매거진 화면에서 바로 글을 쓸 방법이 없어진다. 해결은 생각보다 간단했다. 글쓰기 블록에는 원래 class="ec-base-button {$write_display|display}" 가 붙어 있고, 카페24가 권한이 없는 사용자에게는 이 변수로 숨김 클래스를 넣어 준다. 즉 권한 판단은 이미 플랫폼이 하고 있었다. 내가 할 일은 숨김 목록에서 .ec-base-button 을 빼서 카페24의 판단이 그대로 드러나게 하는 것뿐이었다. /* ---- 숨김 요소 ---- */ .xans-board-listheader-8, .xans-board-listpackage .boardSort, .xans-board-search-8 { display: none !important; } /* ---- 글쓰기 버튼 (FAB, 왼쪽 하단 고정) ---- */ .xans-board-listpackage .ec-base-button { position: fixed; bottom: 24px; left: 16px; z-index: 300; } .xans-board-listpackage .ec-base-button .btnStrong::before { content: '+'; } 버튼 위치는 한 번 더 바뀌었다. 처음에는 목록 상단 왼쪽에 position: sticky 로 붙였는데, 상단에는 고정 헤더(112px)와 카테고리 탭, 슬라이더가 몰려 있어서 버튼까지 얹으니 복잡했다. 3분 뒤 커밋에서 화면 왼쪽 하단에 떠 있는 둥근 버튼(FAB)으로 옮겼다. 일반 고객에게는 아예 렌더링되지 않는 버튼이라, 콘텐츠를 가리는 문제도 운영자 화면에서만 생긴다. 4. 메인 화면 섹션: 같은 게시판을 다른 모양으로 메인 화면 매거진 섹션은 처음에 'MAGAZINE'이라는 제목 옆에 '전체보기' 링크가 붙은 2열 썸네일 그리드였고, 썸네일 아래에 제목과 날짜가 따로 붙었다. 이것도 게시판 페이지와 같은 오버레이 카드로 바꾸고, 제목은 'MK매거진'으로, 날짜와 작성자를 담던 .summary 는 display: none !important 로 완전히 숨겼다. 섹션 하단에는 '매거진 더 보러가기' 버튼을 달았다. 메인 섹션의 이미지는 원래부터 class="lazyload" data-src="{$img_src}" 방식의 지연 로딩이었고, 게시판 페이지 목록에도 같은 방식을 적용했다. PC 스킨으로 옮길 때는 '매거진 더 보러가기' 버튼 대신 다른 메인 섹션들이 쓰는 공통 '전체보기' 링크 스타일( .didy-catrank-more )로 맞췄다. 매거진만 따로 생긴 버튼을 둘 이유가 없었다. 결과 MK매거진 게시판은 목록 전환 탭, 검색 폼, 작성자·날짜 표시가 사라진 카드형 화면이 됐다. 운영자는 기존과 똑같이 카페24 관리 화면이나 게시판에서 글을 올리고, 글을 쓸 권한이 있으면 매거진 화면 왼쪽 아래에 글쓰기 버튼이 뜬다. 메인 화면 매거진 섹션도 같은 게시판을 1:1 카드로 보여 준다. 모바일과 PC 두 스킨에 같은 구조로 들어갔고, 이후 공통 레이아웃( layout.html )으로 옮기는 작업 때도 게시판 스킨 쪽은 레이아웃 지정 한 줄만 바꾸면 됐다. 회고 가장 잘한 결정은 모듈을 지우지 않고 숨긴 것이다. 카페24 스킨 작업은 플랫폼이 주는 블록을 재료로 삼는 일이라, 당장 화면에서 필요 없어 보이는 블록도 나중에 JS가 읽을 데이터나 권한 판단 결과를 품고 있는 경우가 많다. 글쓰기 버튼이 딱 그랬다. 권한 로직을 직접 만들 필요 없이, 내가 덮어 둔 CSS 한 줄을 걷어내는 것으로 끝났다. 아쉬운 건 !important 가 너무 많아진 점이다. 기본 CSS를 이기려고 그리드와 목록에 하나씩 붙이다 보니, 나중에 PC 페이지네이션 버튼을 다듬을 때는 거의 모든 속성에 !important 가 붙은 규칙을 다시 !important 로 덮는 상황이 됐다. 다시 한다면 게시판 페이지에서도 메인 섹션처럼 "기본 스타일 중립화 파일"과 "실제 디자인 파일"을 먼저 분리해 두겠다. 그러면 우선순위 싸움은 리셋 파일 한 곳에서만 하면 된다. 썸네일 비율을 여러 번 바꾼 것도 돌아보면 줄일 수 있었다. 3:4, 3:2, 4:3, 1:1을 화면마다 따로 고르다가 결국 하나로 모였다. 다시 한다면 실제로 올라와 있는 매거진 이미지들을 먼저 모아 놓고 비율 하나를 정한 뒤 시작하겠다. 기간: 2026.03 ~ 2026.04 기술: 카페24 스마트디자인(게시판 모듈), HTML, CSS(Grid, aspect-ratio, line-clamp), JavaS