• HJ
    ActionMaskTech. Blog
Information
  • About
Blog
  • 전체
    17
  • AI
    4
  • Project
    5
  • Tip
    8
  • Tag
  • Github
  • RSS
  • ©2026 ActionMask. All Rights Reserved.
  1. Home

온라인 커뮤니티, 티티닷컴

Today and tomorrow
Project
2024-02-04 17:11
11분

티티닷컴티티닷컴

Information
프로젝트 개발 사례입니다.

티티닷컴 (tt-dot.com)

티티닷컴은 유머, 소설, 이미지, AI, 오디오, 정치/시사, 스포츠 등 다양한 주제에 대해 토론하고 공유할 수 있는 대한민국 온라인 커뮤니티입니다.
기존 대형 온라인 커뮤니티의 복잡한 메뉴 구성과 폐쇄적인 운영정책을 개선하고자 자체적으로 온라인 커뮤니티를 구축하고자 프로젝트를 시작하게 되었습니다.

프로젝트 개요

  • 개발시기: 2024년
  • 주요 사용 언어: PHP, Javascript
  • 결과물: 웹서비스
  • 기여도: 100% (기획, 설계, 개발, 테스트, 유지보수)

개발 방향

기존 온라인 커뮤니티들과 최대한 유사한 구성을 가지면서 직관적인 UI를 지향했으며, 현대 SPA 프론트엔드 개발 프레임워크들이 주는 느낌은 커뮤니티에서 일반적으로 느끼게 되는 클래식한 느낌은 반감시켜 배제하고자 하였습니다.
또한, 너무 많은 라이브러리나 프레임워크에의 의존을 줄이고자 하였습니다.
따라서, 클래식한 온라인 커뮤니티의 경험, 좀 더 심플하고 직관적 UI, 깔끔한 디자인, 프레임워크과 라이브러리 의존성 최소화를 바탕으로 개발 방향을 잡게 되었습니다.

기술 스택

처음에는 최신 기술 스택들을 적용하여 온라인 커뮤니티를 구성하려 하였으나, 클래식한, 전통적인 웹 개발 방식에 따라 기존 온라인 커뮤니티의 경험을 그대로 전달하고자 하였습니다.
너무 세련되고 다이내믹한 SPA 웹 서비스 보다 클릭 시 깜빡임이 있어도 수많은 커뮤니티 글의 안정적인 SEO 지원 등을 위해 전통 웹 개발 방식으로 기술 스택을 정하였습니다.
완벽한 클래식 경험을 제공하기 위해 기존의 국내 커뮤니티가 주료 사용하고 있는 PHP를 기본 웹 개발 언어로 결정하였습니다.
클라이언트와 서버 간 실시간 반응성을 구현하기 위해 Node.js + Express 환경에서 웹소켓을 구현하였습니다.
DB는 PHP와 가장 잘 어울리는 MySQL 8을 선택하였습니다. Javascript는 외부 라이브러리나 프레임워크 없이 순수 VanillaJS를 사용하였습니다.

정리하면 아래와 같습니다.

  • NGINX + PHP 8 + MySQL 8: 웹 어플리케이션 서버, 백엔드 + 프론트엔드, 데이터베이스
  • Node.js + Express: 웹소켓 백엔드 시스템
  • VanillaJS: 클라이언트 사이드 JS

주요 기능

티티닷컴의 주요 기능은 다음과 같이 정리할 수 있습니다.

기본 기능 + 관리자 기능

관리자 기능과 더불어 온라인 커뮤니티들이 제공하는 기본적인 기능들은 대부분 지원하도록 개발하였습니다. 간단하게 정리하면 몇가지 특징은 다음과 같습니다.

  • 카테고리 (게시판) 추가/수정/삭제: 관리자가 게시판 추가/수정/삭제 및 배치 가능
  • 접근 권한 관리: 각 게시판의 접근 권한 관리 가능 (레벨 제한, 글 작성 제한, 접근 자체 제한 등)
project
ttcom
tt
community
development
service
In this article
  • 티티닷컴 (tt-dot.com)
  • 프로젝트 개요
  • 개발 방향
  • 기술 스택
  • 주요 기능
  • 기본 기능 + 관리자 기능
  • 파인 튜닝된 에디터
  • 국가 표시
  • 마무리
  • 댓글/대댓글 무한 확장: 댓글의 계층 구조에 제한이 없어 댓글 배틀이 가능
  • 댓글 작성 시 이미지 첨부: 댓글에 이미지로 좀 더 강한 어필 가능
  • 움짤 MP4 변환: 트래픽을 최소화할 수 있도록 각종 움짤 이미지들을 MP4로 최적화하여 최대 용량을 90% 가량 축소 가능
  • 이미지 업로드 편리성 극대화: 기존 전통적인 커뮤니티에서 업로드의 불편한 점을 개선, 이미지/영상 드래그 및 복사/붙여넣기를 통해 자동 업로드 구현
  • 초대 시스템: 초대 코드로 회원가입을 하거나 추후 회원 인증을 하면 성골/진골 사용자로 인증이 되며 뱃지가 표시되고, 이 후 다른 회원을 초대할 수 있는 코드가 발급됨

    • 댓글 이미지 첨부댓글 이미지 첨부

    파인 튜닝된 에디터

    글 작성 데이터의 경우, TinyMCE 에디터의 마지막 MIT 라이센스 버전인 6.8.5를 차용하였으며, 커뮤니티에 맡게끔 몇가지 튜닝을 하였습니다.

    • 유튜브 링크 추가 기능: 유튜브 링크 추가 시 자동으로 유튜브 영상 임베딩
    • 이미지 업로드/드래그앤드롭/붙여넣기: 기본 업로드 플러그인을 사용하지 않고, 자체적으로 업로드 처리 플러그인을 개발
    • 동영상 임베딩 기능 강화: 동영상이 빈번하게 사용되기 때문에 영상 최적화, 동영상 플레이어 내장 등 개선

    티티닷컴에 적용된 TinyMCE 6 기반 에디터티티닷컴에 적용된 TinyMCE 6 기반 에디터

    국가 표시

    티티닷컴에서는 글이나 댓글 작성 시 작성자의 현재 국가를 표시하게됩니다.
    클라우드플레어서 요청 헤더에 자동으로 국가정보를 넘겨 서버로 보내주어 이 정보를 활용할 수 있지만, 서비스 의존성을 없애기 위해서 GeoIP2를 이용하여 국가 정보를 가져옵니다.
    IPv6도 지원하기 때문에 모바일 환경 등에서도 적절하게 대응할 수 있습니다. (이를 위해서는 클라우드플레어에서 IPv6 정보를 Psuedo IPv4로 변환시키거나 하면 안됩니다.)
    GeoIP2에서 제공하는 MMDB파일을 다운로드 받고, GeoIP2 패키지를 컴포저로 설치하면, 다음과 같은 Wrapper 클래스로 만들어 두어 국가 정보를 쉽게 조회할 수 있도록 합니다.

    글 또는 댓글 작성 시 국가 표시글 또는 댓글 작성 시 국가 표시

    # ... 중략 ...
 
use GeoIp2\Database\Reader;
 
// GeoIP 관련 클래스
class GeoIP
{
    private static $reader = null; // 전역에서 사용할 MMDB 리더 변수
 
    private static function get_reader()
    {
        if (self::$reader == null) {
            self::$reader = new Reader(Config::GEOIP_DB_PATH);
        }
 
        return self::$reader;
    }
 
    /**
     * IP주소의 국가 코드 가져오기
     * 
     * @param string $ip_address IP 주소 문자열
     * 
     * @return string 국가 코드 (ISO 3166-1 alpha-2)
     */
    public static function get_country_code(string $ip_address): string
    {
        $reader = self::get_reader();
        $record = $reader->city($ip_address);
 
        if ($record) {
            return $record->country->isoCode;
        }
 
        return "";
    }
 
    function __destruct()
    {
        if (self::$reader != null) {
            self::$reader->close();
        }
    }
}

    마무리

    게시판 개발은 기능 추가 등을 고려하면 끝이 없을 정도로 매우 많은 작업을 요하는 건입니다. 국내 온라인 커뮤니티 서비스들의 대부분은 오픈소스 게시판을 기반으로 만들어져서 오랜 기간 수정을 거쳐서 현재의 모습으로 진화를 거듭해왔습니다.
    티티닷컴은 Legacy 게시판 솔루션을 이용하지 않고, 클래식한 웹 개발 환경을 이용하여 게시판을 구현하고 이를 통해 커뮤니티 서비스를 개발하였습니다.
    개인 취미 혹은 개인적인 니즈로 인해 개발을 시작하게 되어 많은 시간을 할애하여 개발을 진행할 수 없었지만, 짧은 기간 내에 최대한 여러가지 기능들을 개발하고 커뮤니티 사용자들이 좀 더 편리하게 서비스를 이용할 수 있도록 신경써서 유지보수를 진행했습니다.

    티티닷컴은 아래 사이트 링크를 통해 접속하여 실제 서비스를 확인할 수 있습니다.

    티티닷컴 사이트

    긴 글 읽어주셔서 감사합니다.

    Project 카테고리의 다른 글
    서울 디자인 소사이어티, 디자이너 커뮤니티
    서울 디자인 소사이어티, 디자이너 커뮤니티
    디자이너를 위한 집단 지성 커뮤니티
    2023-04-01 13:50
    글로벌 K-패션 플랫폼, 위노뎀
    글로벌 K-패션 플랫폼, 위노뎀
    한국의 패션 아이템을 글로벌 시장으로
    2022-02-01 17:11
    반려동물을 위한 인공지능 질병 진단 키트 플랫폼, 애니스캔
    반려동물을 위한 인공지능 질병 진단 키트 플랫폼, 애니스캔
    Healthcare solution for animals
    2021-03-03 14:36
    빅데이터 기반 개인 맞춤 패션 플랫폼, 아르누아
    빅데이터 기반 개인 맞춤 패션 플랫폼, 아르누아
    Big-data based e-commerce platform ARNOIR
    2020-01-23 10:58