조니웹 사이트 전면 리뉴얼 했어요!

안녕하세요.

조니웹(JonnyWeb)의 전면 리뉴얼을 완료하였습니다.

대형 커뮤니티의 고트래픽 최적화 환경을 다루던 경험을 바탕으로, 이번 리뉴얼은 단순한 디자인 변경을 넘어 성능 향상과 모던 웹 표준 적용에 집중했습니다. 이에 따라 변경된 주요 사항들을 안내해 드립니다.

주요 리뉴얼 포인트

1. 다크모드(Dark Mode) 지원

라이믹스 코어의 표준 클래스(color_scheme_dark)와 Tailwind CSS를 연동하여 다크모드를 지원합니다. 단순 색상 반전이 아닌, 이질감 없는 화면 전환이 가능하도록 구현되었습니다. 우측 상단 아이콘을 통해 테마를 전환하실 수 있습니다.

2. 모바일 UI 및 오프캔버스 메뉴

PC와 모바일 환경에 맞춘 최적화된 레이아웃을 제공합니다. 모바일 환경에서는 오프캔버스(Off-canvas) 슬라이드 사이드바를 도입하여, 뎁스(Depth)가 있는 메뉴도 아코디언 형태로 탐색할 수 있도록 개선했습니다.

3. 반응형 게시판 스킨 적용

기존 테이블(Table) 구조를 제외하고, Flex 기반의 반응형 리스트로 게시판을 재설계했습니다.

• 제목 길이에 따른 레이아웃 깨짐을 방지하기 위해 새 글(N), 수정된 글(U) 뱃지 및 첨부파일 아이콘을 인라인으로 배치했습니다.
• 썸네일 프리뷰 기능은 자바스크립트 대신 순수 CSS로 구현하여 렌더링 성능을 개선했습니다.
• 본문 읽기 영역은 Tailwind Typography(prose) 플러그인을 적용하여 테마 전환 시 자간과 폰트 크기가 자동 포맷팅되도록 처리했습니다.

4. 인라인 댓글 시스템

페이지 이동 없이 대댓글 작성이 가능한 빠른 답글 폼을 추가했습니다. 계층형(Depth) 구조를 시각적으로 명확히 분리하여 모바일에서도 댓글 흐름 파악이 용이하도록 수정되었습니다.

5. 프리미엄 모듈 랜딩 페이지 구축

타임라인Plus, 플러터 하이브리드 앱 브릿지 등 주력 모듈의 전용 랜딩 페이지를 추가했습니다. 타임라인Plus 모듈이 어떻게 쿼리 수를 줄이고 서버 부하를 낮췄는지에 대한 기술적 개선 사항을 확인하실 수 있습니다.

기술 스택 변경 사항

라이믹스의 Blade 템플릿 엔진을 활용하여 레거시 코드를 정리하고, Tailwind CSS를 도입하여 CSS 파일 비대화를 방지했습니다.

불필요한 jQuery 의존도를 낮추고 시맨틱 태그(<ul>, <li>, <time>, <article>) 구조를 적용하여 검색 엔진 최적화(Technical SEO)와 웹 접근성을 함께 개선했습니다.

리뉴얼된 조니웹을 통해 보다 빠르고 안정적인 환경을 확인해 보시기 바랍니다.

감사합니다.