Impeccable 스킬 적용한 게시글 상세 화면 구조 개선

요약: 게시글 상세 화면이 제목·공유 버튼·태그·메타가 한 카드에 뭉치고, 본문·이전/다음·관련 글·댓글이 전부 같은 카드 상자로 반복돼 위계가 없었다. Impeccable 스킬로 화면을 점검해 제목 28px 헤더 3분할, 카드 제거 후 구분선 구획, 아이콘 공유 버튼으로 바꿨다. 새 토큰 --fs-post-title 하나와 CSS 구획 클래스로 모든 테마에 공통 적용했다.

문제: 모든 것이 같은 상자였다

AICreo(CodeIgniter 4 기반 홈페이지 보일러플레이트)의 글 상세(board/view)는 Bootstrap card를 그대로 썼다. 제목 카드, 이전/다음 카드, 관련 글, 댓글 카드가 같은 회색 테두리 상자로 줄지어 있었다. 읽는 화면인데 눈이 어디서 시작해 어디로 가는지 알 수 없었다.

구체적으로 걸린 점은 이랬다.

• 제목 크기가 메뉴와 같았다(--fs-board-title: var(--fs-nav)). 목록 화면 기준으로 맞춘 값이 상세에도 그대로 쓰였다.
• 헤더에 제목, 분류 배지, 공유 버튼 4개(텍스트 포함), 태그, 작성자·날짜·조회가 한꺼번에 들어 있었다. 날짜는 2026-10-29 21:56:49 초 단위까지 나왔다.
• 첨부 이미지와 파일이 각각

  ---

  로 나뉘어 본문 아래 구획이 불필요하게 많았다.
• 댓글이 없을 때는 빈 목록만 보였고, 작성 폼 입력창이 -sm 크기로 작았다.

해결: 상자를 걷고 여백과 가는 선으로 구획

방향은 하나였다. 카드 상자 대신 여백과 가는 구분선으로 구획한다. 마크업은

안에 세 덩어리를 두는 구조로 바꿨다.

 

1) 헤더 3분할

제목을 --fs-post-title: 1.75rem(모바일 22px)으로 키웠다. 상세 화면 제목은 읽기 화면의 최상위 위계라 메뉴보다 분명히 커야 한다고 봤다. 대신 목록·시리즈·태그 화면의 --fs-board-title은 그대로 둬서 영향 범위를 상세 화면으로 한정했다.

분류·작성자·날짜·조회는 배지와 아이콘을 걷어내고 가운데점으로 이은 한 줄로 만들었다. 가운데점은 마크업이 아니라 CSS로 넣는다.

.post-meta__item + .post-meta__item::before {
    content: "·";
    margin: 0 .5rem;
}

날짜는 2026.10.29 형태로 줄이고 으로 감쌌다. 태그는 헤더에서 본문 끝으로 옮겼다. 읽기 전에 볼 정보가 아니라 읽고 나서 이어 가는 정보이기 때문이다.

2) 공유 버튼은 아이콘만

공유 버튼 4개가 글자까지 달고 헤더 한 줄을 차지했다. 아이콘 원형 버튼(36px)으로 줄이고 메타 줄 오른쪽 끝(margin-left: auto)에 붙였다. 글자는 visually-hidden으로 남겨 스크린 리더 접근성은 유지하고 title로 툴팁을 줬다. 모바일(575px 이하)에서는 메타 아래 줄로 내려간다.

링크 복사 피드백도 바꿨다. 글자 대신 아이콘이 bi-link-45deg에서 bi-check2로 2초간 바뀐다. 숨겨 둔 라벨 텍스트도 '복사됨'으로 함께 바뀐다.

copyText(copyBtn.dataset.url).then(function () {
    label.textContent = '복사됨';
    icon.className = 'bi bi-check2';
    copyBtn.classList.add('is-copied');
    setTimeout(function () {
        label.textContent = '링크 복사';
        icon.className = 'bi bi-link-45deg';
        copyBtn.classList.remove('is-copied');
    }, 2000);
});

3) 본문 아래는 구분선 + h2

이전/다음, 이어 읽을 글, 댓글은 모두 .post-section 하나로 통일했다. 위쪽에 1px 구분선과 여백, 제목은 h2(.post-section__title)다.

.post-section {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

첨부 이미지·파일은 본문 안 옅은 상자 하나(.post-files)로 합치고

---

를 없앴다. 좋아요 폼과 하단 광고, 수정/삭제 버튼도 본문 카드 밖으로 빼서 article 안에 순서대로 놓았다. 수정/삭제 버튼은 권한이 없으면 빈 줄이 생기던 것을 trim($postActions) !== '' 조건으로 막았다.

 

댓글은 비어 있을 때 "아직 댓글이 없습니다. 첫 댓글을 남겨 보세요."를 보여 주고, 작성 폼의 입력창을 -sm에서 기본 크기로, 비회원 필드 3개(이름·비밀번호·스팸 방지 계산)를 한 줄(col-sm-4)로 맞췄다.

남은 위험

• 테마(ilgan, cobalt 등)가 .card를 따로 꾸몄다면 이 화면에서 그 스타일이 빠진다. 구획 CSS를 tokens.css에 두어 모든 테마 공통으로 적용했지만, 테마별 화면은 직접 확인하지 못했다.
• 모바일 폭을 포함해 화면은 로컬에서 눈으로 확인하지 못한 상태로 PR을 올렸다. composer ci(626 테스트)만 통과했다.

배운 점

• 목록 화면에서 정한 제목 크기 토큰을 상세 화면이 그대로 물려받고 있었다. 화면의 역할이 다르면 위계 토큰도 따로 둬야 한다. 목록용 토큰은 건드리지 않고 --fs-post-title만 추가해 영향 범위를 좁혔다.
• 카드 상자는 구획을 쉽게 만들지만 모든 구획이 같은 무게가 된다. 구분선과 h2로 바꾸면 마크업 의미(article·nav·section)와 시각 위계가 함께 정리된다.
• 아이콘만 남기는 변경은 visually-hidden 텍스트, title, 복사 성공 피드백까지 같이 챙겨야 접근성이 후퇴하지 않는다.