개발
eruLabo

사이트(블로그) 댓글 설계 및 기능 기획

43 views as of November 22, 2024.
이번에 큰맘먹고 내 사이트에 댓글 기능을 개발해 보았다.

어차피 인터넷 변두리에있는 개인 사이트라 유입도 적고 이웃이란 개념도 없는 독고다이 넷생활이지만, 그래도 소통창구의 '소'정도는 티내기위해서, 그리고 댓글기능도 한번 진득하게 만들어보고자 시작하게 된 주제이다.


게시글의 단짝 댓글

댓글은 일반적으로 커뮤니티 사이트에서 본 게시글에 의견을 남기기위한 답글을 뜻한다.
예전엔 진짜 게시글에 게시글로 답하는 '답글'이 있었긴 했다만, 언젠가부터는 답글은 그 게시글로 모여야하는 시선만 분산시키고 소통에 페이지 이동이 필요하다는 문제가 대두되자 점차 사라지게 되었고 현재의 댓글만 남게 되었다.

댓글은 짧은 내용으로 본문에 대한 여러가지 생각과 의견, 그리고 댓글끼리의 토론의 장이 열리는 아주 좋은 커뮤니티의 근본이라 할 수 있는 영역이다.

그러다보니 흡사 채팅을 하듯이 소통 의도가 담긴 UI와 UX를 고려해서 만들어야 하는게 기본이다.



댓글의 구성요소

댓글이라 하면 뭐가 필요할까?
한 번 생각해보자.

우선 댓글쓰는 사람의 '이름이나 닉네임'이 있어야 할것이고 당연히 댓글의 본문에 해당하는 '내용', 그리고 댓글을 남긴 '시간', 누구에게 다시 댓글을 남기는 '대댓글'과 '멘션', 그리고 댓글을 '수정하거나 삭제' 할수 있는 기능 등이 필요할 것이다.

이걸 쉽게 정리해본다면 댓글에 대한 요구(Requirement)는 아래와 같이 정리해 볼 수 있다.

- 닉네임 (Nickname)
- 내용 (Content)
- 일시 (Date)
- 대댓글 (Reply)
- 대댓글 대상 (Mention)
- 수정, 삭제 (Update, Delete)

여기서 일시는 좀더 SNS 스럽게 가자면 기존 날짜형식 처럼 2024-11-22 16:00:00 처럼 딱딱하게 표기하기보다는 '방금 전', '1시간 전' 식으로 현재 시간기준으로의 시간 차이를 글로 써주면 더욱 그 느낌이 살것이다.



댓글 모델 설계

그럼 이런 구조를 포함하기 위해서 댓글의 모델을 아래와 같이 설계해볼 수 있을것이다.

Schema::create('comments', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('post_id');
    $table->unsignedBigInteger('user_id')->nullable();
    $table->unsignedBigInteger('parent_id')->nullable();
    $table->string('nickname')->nullable();
    $table->string('password')->nullable();
    $table->text('content')->nullable();
    $table->string('mention')->nullable();
    $table->string('ip_address')->nullable();
    $table->string('ip_based_uid')->nullable();
    $table->timestamps();
    $table->softDeletes();
});Copy


위 코드는 라라벨의 database 청사진에 해당하는 문법이지만 일단 대략적으로 테이블 구성을 쉽게 볼 수 있을것이다.

먼저 댓글의 고유값(id)부터 시작해서, 어느 게시글(post_id)의 댓글인지, 사용자의 댓글(user_id)인지 비회원의 댓글인지, 댓글 단 사람의 닉네임(nickname)과 비회원 처리를 위한 패스워드(password), 댓글의 내용(content), 대댓글의 대상(mention), 비회원 검증을 위한 아이피 주소(ip_address)와 아이피 기반 유니크아이디(ip_based_uid) 까지.

이렇게 코멘트 모델을 설계해두고 데이터베이스를 작성해두면 위의 요구사항에 맞춰 적절히 사용할 수 있을것이다.



댓글 UI/UX

댓글을 어떤 유저 인터페이스를 바탕으로 구현하고 어떤 사용경험을 제공할 것인가가 항상 이런 기획에서 빠질 수 없는 부분이다.



나는 이런 느낌으로 댓글 입력란을 구현했다.
꽤나 심플하게 말이다.

댓글의 내용을 적고 닉네임과 추후 수정과 삭제를 위한 검증 비밀번호를 입력하는 방식이다.

각각의 입력란은 최소 글자수와 최대 글자수를 검증하는 코드를 자바스크립트로 아래처럼 만들어 필요할때 불러서 사용하고 있다.

function validateField(value, minLength = 0, maxLength = Infinity, fieldName = '필드') {
    if (value.length < minLength) {
        return `${fieldName}은(는) 최소 ${minLength}자 이상이어야 합니다.`;
    }
    if (value.length > maxLength) {
        return `${fieldName}은(는) 최대 ${maxLength}자를 초과할 수 없습니다.`;
    }
    return ''; // 검증 통과
}Copy


이렇게 댓글을 입력란을 통해 기입하면 아래 처럼 댓글이 표기된다.



댓글이 여러가지 정보와 함께 페이지 새로고침없이 비동기 요청(ajax)로 백단과 통신을해서 기록을 하고 저 댓글 리스트를 랜더링해 그값을 지정된 곳에 채워넣는 방식이다.

그리고 다시 댓글을 입력하면 똑같은 뎁스로 댓글이 계속 입력되나 댓글 우상단의 '대댓글'버튼을 통해 댓글을 입력하면 아래처럼 대댓글 타래가 시작된다.



여기부터가 본격적으로 댓글 기획의 시작이라고 볼 수 있을거 같다.

대댓글을 1차 뎁스로만 지원할지 아니면 무한이 들어가는 뎁스로 지원할지는 필요에맞게 구현해야겟지만,
나는 최대 뎁스를 1뎁스로 구현해 댓글아래 달리는 모든 대댓글은 원글의 대댓글로 인식하게 하는 대신 어느 댓글을찍고 대댓글을 달앗는지 구분하기위해 멘션을 통해 이를 표기하고자 했다.

실제로 위 스크린샷에서 '웹개발자'가 단 대댓글은 '지나가는 행인'을 찍고 대댓글을 단거기때문에 자동으로 '@지나가는행인'이라는 멘션이 댓글 상단에 표기되도록 말이다.

그렇다 이걸 위해서 위에 댓글 모델에 mention 컬럼이 존재한 것이다.

이 대댓글과 멘션 기능을 이용해서 아래 이미지와 같이 대댓글 기능을 기획하고 구현화 했다.



여기에 한발자국 더 나아가서 웹사이트 주인(유저)는 일련의 비회원 처리가 필요없다.
그러므로 댓글 입력기또한 필요없는 부분은 넘어가고 이를 포함하는 앞단과 뒷단의 코드 분기를 적당히 고려해서 구현해주면된다.


결론

뭐 결국 말이야 쉽지만 나 자체도 위 기능기획을 가지고 실제로 댓글기능을 만드는데는 2-3일의 시간이 걸렸다.
큰 프로세스나 로직은 금방만들었는데 위에 언급된거처럼 대댓글 기능, 비회원 검증 기능 같이 디테일에 해당하는 부분은 몇번이나 시행착오를 거쳤다.

보고 따라할 분이 있으려는진 모르겠는데 라라벨에서 이런 댓글구조를 어떻게 구현했는지에 대해서 조만간 코드도 여기에 한번 올려놔봐야 겠다.

#개발 #댓글 #기획
0 개의 댓글
×