XE의 패러다임 변화: 정형화된 스킨 구조에서의 탈출

들어가며

XE(XpressEngine)와 그 후속작인 Rhymix는 오랜 시간 한국 웹 개발의 중심에 있었습니다. 게시판, 회원 시스템, 모듈 구조 등 강력한 기능을 제공하면서도, 한편으로는 "정형화된 틀"이라는 제약 속에서 개발자들이 창의성을 발휘하기 어려웠던 것도 사실입니다.

특히 마이페이지 스킨은 그 대표적인 예입니다. 회원 정보, 작성글, 댓글, 쪽지, 스크랩 등 기능별로 나뉜 탭 구조는 XE 시절부터 거의 변하지 않은 UI 패턴이었습니다. 개발자들은 이 구조를 따라야만 했고, 완전히 새로운 UI/UX를 시도하는 것은 큰 도전이었습니다.

기존 마이페이지의 한계

탭 기반 구조의 제약

전통적인 XE 마이페이지 스킨은 다음과 같은 구조를 강제했습니다:

┌─────────────────────────────────────────────────┐
│  [회원정보] [작성글] [댓글] [쪽지] [스크랩]      │
├─────────────────────────────────────────────────┤
│                                                 │
│              탭 콘텐츠 영역                      │
│                                                 │
└─────────────────────────────────────────────────┘

이 구조는 기능적으로는 완성도가 있었지만, 현대적인 웹 디자인 트렌드와는 거리가 있었습니다. 대시보드 형태의 레이아웃, 카드 기반 UI, 사이드바 네비게이션 같은 디자인을 적용하려면 스킨 파일 전체를 새로 작성해야 했고, 그마저도 core의 제약 때문에 완전한 자유도를 얻기 어려웠습니다.

스킨 의존적 개발의 문제점

기존 방식에서 마이페이지를 커스터마이징하려면:

1. /modules/member/skins/ 경로에 스킨을 만들어야 함
2. info.html, document_list.html, scrapped.html 등 정해진 파일명과 구조를 따라야 함
3. core에서 전달하는 변수와 데이터 구조에 의존해야 함
4. 탭 네비게이션 로직이 이미 내장되어 있어 다른 방식으로 변경하기 어려움

결과적으로 "다르게 만들고 싶어도 만들 수 없는" 상황이 발생했습니다.

API의 등장: 새로운 가능성

데이터와 프레젠테이션의 분리

API 기반 개발의 핵심은 데이터 레이어와 프레젠테이션 레이어의 분리입니다. 기존에는 스킨이 데이터를 받아와 직접 렌더링하는 구조였다면, API 방식에서는:

[클라이언트 요청] → [API 엔드포인트] → [JSON 응답] → [자유로운 UI 렌더링]

이 구조 덕분에 개발자는 더 이상 정해진 스킨 파일 구조에 얽매이지 않아도 됩니다.

el_d1 레이아웃의 새로운 접근

el_d1 레이아웃에서는 이러한 철학을 바탕으로 마이페이지를 완전히 새롭게 설계했습니다.

기존 방식: - /modules/member/skins/default/ 스킨 사용 - XE/Rhymix core가 제공하는 탭 구조 강제 - 정해진 act별 페이지 전환

el_d1 방식: - 레이아웃 내 assets/pages/mypage.blade.php로 독립 구현 - 사이드바 + 메인 콘텐츠 영역의 현대적 레이아웃 - JavaScript 기반 섹션 전환으로 SPA 같은 사용자 경험 - API를 통한 데이터 조회로 유연한 확장 가능

// 기존 방식: 스킨에서 act로 분기
@if($act == 'dispMemberInfo')
    <!-- 정보 표시 -->
@elseif($act == 'dispMemberOwnDocument')
    <!-- 작성글 목록 -->
@endif

// el_d1 방식: 레이아웃에서 자유로운 구현
<aside class="lg:w-64">
    <!-- 프로필 카드 -->
    <!-- 네비게이션 메뉴 -->
</aside>
<main>
    <!-- 섹션별 콘텐츠 (해시 기반 전환) -->
</main>

디자인 자유도의 확보

el_d1의 마이페이지는 다음과 같은 현대적 UI 요소를 도입했습니다:

• 사이드바 프로필 카드: 아바타, 닉네임, 이메일, 회원 등급 배지를 한눈에
• 섹션 기반 네비게이션: 탭이 아닌 세로 메뉴로 확장성 확보
• 카드 기반 정보 표시: 정보를 시각적으로 그룹화
• 토글 스위치: 알림 설정 등 현대적 인터랙션 요소
• 반응형 디자인: 모바일에서도 자연스러운 레이아웃 전환

이 모든 것이 가능했던 이유는 API를 통해 필요한 데이터만 가져와 원하는 형태로 렌더링할 수 있었기 때문입니다.

API 기반 개발의 장점

1. UI/UX 혁신의 자유

스킨 구조에 얽매이지 않으므로, 트렌드에 맞는 디자인을 자유롭게 적용할 수 있습니다. 대시보드, 타임라인, 무한 스크롤, 드래그 앤 드롭 등 어떤 인터페이스도 구현 가능합니다.

2. 프론트엔드 기술 스택의 유연성

React, Vue, Alpine.js 등 원하는 프론트엔드 프레임워크를 사용할 수 있습니다. el_d1에서는 Alpine.js와 HTMX를 활용하여 SPA 같은 사용자 경험을 제공하면서도 서버 사이드 렌더링의 장점을 유지했습니다.

3. 성능 최적화

필요한 데이터만 API로 요청하므로, 전체 페이지를 새로고침하는 것보다 효율적입니다. 부분 업데이트, 지연 로딩 등 다양한 최적화 기법을 적용할 수 있습니다.

4. 유지보수의 용이성

데이터 로직과 UI 로직이 분리되어 있어, 한쪽을 수정해도 다른 쪽에 영향을 최소화할 수 있습니다. 디자인 변경 시 API는 그대로 두고 프론트엔드만 수정하면 됩니다.

패러다임 전환의 의미

XE/Rhymix에서 API 기반 개발로의 전환은 단순한 기술적 변화가 아닙니다. 이는 "CMS가 정해준 틀 안에서 개발"에서 "CMS를 백엔드로 활용한 자유로운 개발"로의 패러다임 전환입니다.

물론 기존 스킨 방식도 여전히 유효하며, 빠른 개발이 필요한 경우 효율적입니다. 하지만 차별화된 사용자 경험을 제공하고 싶다면, API 기반 접근이 필수적입니다.

마치며: 이온디의 새로운 시도

**이온디(EOND)**는 2008년부터 XE/Rhymix 생태계에서 활동해온 전문 개발 업체입니다. 단순히 기능을 구현하는 것에 그치지 않고, UI/UX 혁신에도 지속적으로 도전하고 있습니다.

el_d1 레이아웃은 그 결과물 중 하나입니다. 전통적인 XE 마이페이지의 탭 구조에서 벗어나, 현대적인 사이드바 네비게이션과 카드 기반 레이아웃을 적용했습니다. API를 활용한 AI 챗봇 상담 기능, HTMX를 이용한 부드러운 페이지 전환 등 새로운 기술도 적극 도입했습니다.

XE/Rhymix는 여전히 강력한 CMS입니다. 그리고 API 개발을 통해 그 가능성은 더욱 확장되고 있습니다. 이온디는 앞으로도 기능과 디자인 양면에서 새로운 시도를 멈추지 않을 것입니다.

작성일: 2025년 12월 1일 작성: 이온디(EOND)