아임웹 게시판 커스텀ㅣQ&A 게시판 답변완료 배지 자동 표시하는 방법

답변 전 게시판

답변 후 게시판

 

아임웹 Q&A 게시판 답변완료 배지 자동 표시하는 방법

홈페이지를 운영하다 보면 고객문의 게시판을 사용하는 경우가 많습니다.

하지만 문의글이 많아질수록 방문자는 어떤 글에 답변이 달렸는지 쉽게 확인하기 어렵습니다.

특히 아임웹 기본 게시판은 답변 여부가 직관적으로 보이지 않는 경우가 많아 문의 경험이 다소 불편할 수 있습니다.

 

이번에 소개하는 커스텀 코드는 아임웹 Q&A 게시판에서 관리자 답변 여부를 자동으로 확인하고,

제목 옆에 "답변완료" 배지를 표시해주는 기능입니다.

추가로 게시판 헤더와 검색창 디자인까지 함께 개선할 수 있어 보다 전문적인 홈페이지 제작이 가능합니다.

 

실제 구현 보기

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

1. 답변완료 배지 자동 생성

관리자가 댓글 또는 답변을 작성한 게시글을 자동으로 감지합니다.

답변이 확인되면 제목 옆에 다음과 같은 배지가 표시됩니다.

답변완료

별도 수작업 없이 자동으로 적용됩니다.

 

2. 게시판 헤더 디자인 정리

기본 게시판의 선과 그림자를 제거하여 깔끔한 디자인으로 변경합니다.

불필요한 경계선이 사라져 보다 고급스러운 느낌을 줄 수 있습니다.

 

3. 검색창 UI 개선

기본 검색창을 둥근 형태로 변경합니다.

• 라운드 디자인 적용
• 그림자 효과 추가
• 입력창 정리
• 검색 아이콘 정렬

최근 기업 홈페이지나 브랜드 사이트에서 많이 사용하는 스타일입니다.

---

 

사용하면 좋은 상황

다음과 같은 홈페이지에서 특히 활용하기 좋습니다.

• 고객문의 게시판
• FAQ 게시판
• 유지보수 접수 게시판
• 상담문의 게시판
• 법률사무소 홈페이지
• 병원 홈페이지
• 기업 고객지원 게시판

특히 답변 속도와 고객 응대가 중요한 업종에서 활용도가 높습니다.

---

 

적용 방법

STEP 1

아임웹 관리자 접속

디자인 모드 진입

 

STEP 2

게시판이 있는 페이지에 HTML 위젯 추가

 

STEP 3

아래 전체 코드를 붙여넣기

 

STEP 4

위젯 아이디 변경

현재 코드에는 아래 아이디가 사용됩니다.

#w202606019d2ff1948a79c

반드시 자신의 게시판 위젯 아이디로 변경해야 정상 작동합니다.

---

 

전체 코드

<style>
/* =========================
   게시판 헤더
========================= */
#w202606019d2ff1948a79c .li_header.hidden-xs{
    background:#f7f8fa !important;
    border:none !important;
    box-shadow:none !important;
}

#w202606019d2ff1948a79c .li_header.hidden-xs li{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
}

#w202606019d2ff1948a79c .li_header.hidden-xs:before,
#w202606019d2ff1948a79c .li_header.hidden-xs:after,
#w202606019d2ff1948a79c .li_header.hidden-xs li:before,
#w202606019d2ff1948a79c .li_header.hidden-xs li:after{
    display:none !important;
    content:none !important;
}

/* 상단 검정선 제거 */
#w202606019d2ff1948a79c .li_board,
#w202606019d2ff1948a79c .list_review_wrap{
    border-top:0 !important;
    border-color:transparent !important;
}

/* =========================
   답변완료 배지
========================= */
#w202606019d2ff1948a79c .msoa-answer-badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:8px !important;
    padding:4px 9px !important;
    border-radius:999px !important;
    background:#111827 !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:-0.02em !important;
    vertical-align:middle !important;
    white-space:nowrap !important;
}

/* =========================
   검색창 디자인
========================= */
#w202606019d2ff1948a79c #boardSearch{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-radius:999px !important;
    overflow:hidden !important;
    box-shadow:0 4px 12px rgba(0,0,0,.04) !important;
}

#w202606019d2ff1948a79c #boardSearch .form-control{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    height:44px !important;
    padding-left:16px !important;
    font-size:14px !important;
}

#w202606019d2ff1948a79c #boardSearch .form-control:focus{
    border:none !important;
    box-shadow:none !important;
}

#w202606019d2ff1948a79c #boardSearch .ico-search{
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#111827 !important;
    text-decoration:none !important;
}
</style>

<script>
(function(){
    const widget = document.querySelector('#w202606019d2ff1948a79c');
    if(!widget) return;

    const rows = widget.querySelectorAll('.li_body.holder');

    rows.forEach(function(row){
        const titleLink = row.querySelector('.tit .list_text_title');
        if(!titleLink) return;

        const href = titleLink.getAttribute('href');
        if(!href) return;

        const url = new URL(href, window.location.origin).href;

        fetch(url, { credentials:'same-origin' })
            .then(function(res){
                return res.text();
            })
            .then(function(html){

                const doc = new DOMParser().parseFromString(html, 'text/html');

                const replyAreas = doc.querySelectorAll(
                    '.comment, .comment_area, .comment_wrap, .comment-list, .comment_body, .board_comment, .reply, .reply_area, .reply_wrap, .comment-block'
                );

                let answered = false;

                replyAreas.forEach(function(area){
                    const text = area.innerText || '';

                    if(text.indexOf('관리자') > -1){
                        answered = true;
                    }
                });

                if(answered && !row.querySelector('.msoa-answer-badge')){

                    const badge = document.createElement('span');
                    badge.className = 'msoa-answer-badge';
                    badge.textContent = '답변완료';

                    titleLink.appendChild(badge);
                }
            })
            .catch(function(){});
    });
})();
</script>

---

 

코드 수정 포인트

1. 배지 문구 변경

현재

badge.textContent = '답변완료';

예시

badge.textContent = '답변등록';

badge.textContent = '처리완료';

원하는 문구로 변경 가능합니다.

 

2. 배지 색상 변경

현재

background:#111827;

검정 계열입니다.

예시

background:#2563eb;

파란색

background:#16a34a;

초록색

 

3. 검색창 높이 변경

현재

height:44px;

값을 변경하면 검색창 크기를 조절할 수 있습니다.

 

4. 배지 크기 변경

현재

padding:4px 9px;
font-size:11px;

값을 조절하면 배지 크기를 변경할 수 있습니다.

---

 

자주 발생하는 오류와 해결 방법

- 답변완료 배지가 나오지 않는 경우

대부분 위젯 아이디가 다르기 때문입니다.

브라우저 개발자 도구(F12)로 게시판 위젯 아이디를 확인한 뒤 변경해 주세요.

 

- 일부 게시글만 표시되는 경우

게시판 구조에 따라 댓글 영역 클래스명이 다를 수 있습니다.

댓글 구조를 확인한 후 선택자를 추가하면 해결됩니다.

 

- 모바일에서 디자인이 깨지는 경우

다른 CSS 코드와 충돌하는 경우가 많습니다.

기존 게시판 커스텀 코드와 중복 여부를 확인해 주세요.

---

 

홈페이지 제작 시 활용 팁

문의 게시판은 단순히 글을 남기는 공간이 아닙니다.

답변 여부를 한눈에 확인할 수 있게 만들면 고객 신뢰도가 높아지고 상담 경험도 좋아집니다.

실제로 법률사무소, 병원, 제조업 홈페이지 제작 시 이런 작은 UX 개선만으로도 문의 만족도가 크게 달라지는 경우가 많습니다.

아임웹 기본 기능만 사용하기보다 HTML/CSS/JS 커스텀 코드를 활용하면 훨씬 전문적인 웹디자인 구현이 가능합니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

 

아임웹 기본 갤러리 커스텀

아임웹 기본 갤러리 커스텀 버튼 추가하는 방법 (HTML/CSS/JS 커스텀 코드)