IT기술/Liferay Portal

Liferay Portal CMS 완전 가이드: 비전문가도 쉽게 만드는 전문적인 웹사이트

후스파 2025. 7. 19. 01:34
반응형

Liferay의 콘텐츠 관리 시스템(CMS)은 비전문가도 쉽게 웹 사이트를 운영할 수 있도록 설계되었습니다. 웹 콘텐츠 작성, 이미지 관리, 문서 라이브러리 활용법을 단계별로 알려드립니다.


웹 콘텐츠 관리: 전문가 수준의 페이지 만들기

Liferay는 구조(Structure)와 템플릿(Template)을 통해 체계적인 콘텐츠 생성을 지원합니다.

구조(Structure) 설계

필드 정의: 제목·본문·썸네일 등 필수 요소를 사용자 지정할 수 있습니다.
예시: "뉴스 기사" 구조 → 제목(텍스트), 작성자(선택 목록), 주요 이미지(이미지 업로드)
구조 설계 시 다음과 같은 필드 유형을 활용할 수 있습니다:

  • 텍스트 필드: 제목, 부제목, 간단한 설명
  • 텍스트 박스: 본문 내용, 상세 설명
  • 선택 목록: 카테고리, 태그, 작성자
  • 날짜: 게시일, 이벤트 날짜
  • 이미지: 썸네일, 배너 이미지
  • 링크: 관련 URL, 참조 링크

템플릿(Template) 제작

Velocity 언어 사용: 구조 필드를 HTML/CSS로 배치하여 원하는 디자인을 구현할 수 있습니다.
기능 확장: 조회수·댓글 등 동적 요소 추가가 가능합니다.

<div class="news-article">
    <h1>$title.getData()</h1>
    <div class="meta-info">
        <span class="author">작성자: $author.getData()</span>
        <span class="date">$dateCreated</span>
    </div>
    <div class="featured-image">
        <img src="$featuredImage.getData()" alt="$title.getData()">
    </div>
    <div class="content">
        $content.getData()
    </div>
</div>

콘텐츠 게시

웹 콘텐츠 추가: 관리자 패널 → 콘텐츠 → 웹 콘텐츠 → 새로 만들기
에디터 활용:

  • 이미지 삽입: 문서 라이브러리에서 직접 선택
  • 하이퍼링크: 내부 페이지·외부 URL 연결
  • 게시 일정: 특정 날짜/시간에 자동 공개 설정

WYSIWYG 에디터의 주요 기능:

  • 실시간 미리보기
  • 소스 코드 편집 모드
  • 표 삽입 및 편집
  • 동영상 임베드
  • 소셜 미디어 연동

문서 및 미디어 라이브러리: 모든 파일을 한 곳에서

이미지·PDF·동영상을 체계적으로 관리하는 핵심 도구입니다.

파일 업로드

단일/다중 업로드: 드래그 앤 드롭 지원으로 직관적인 파일 업로드가 가능합니다.
메타데이터 자동 추출: EXIF(카메라 정보), PDF 저자 등의 정보를 자동으로 인식하고 저장합니다.
지원 파일 형식:

  • 이미지: JPG, PNG, GIF, SVG, WebP
  • 문서: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX
  • 동영상: MP4, AVI, MOV, WMV
  • 오디오: MP3, WAV, OGG
  • 압축 파일: ZIP, RAR, 7Z

폴더 관리

계층 구조: /홈/뉴스/2025와 같은 경로 생성으로 체계적인 파일 관리가 가능합니다.

권한 설정: 폴더별로 읽기·쓰기 권한을 부여하여 보안을 강화할 수 있습니다.
폴더 구조 예시:

📁 홈
├── 📁 뉴스
│   ├── 📁 2025
│   ├── 📁 2024
│   └── 📁 보도자료
├── 📁 이벤트
│   ├── 📁 배너
│   └── 📁 포스터
└── 📁 공통
    ├── 📁 로고
    └── 📁 아이콘

미디어 갤러리 활용

전시용 갤러리 생성:

  1. Media Gallery 포틀릿 추가
  2. 특정 폴더 선택 → 슬라이드쇼·그리드 뷰 설정
  3. 썸네일 크기 및 레이아웃 커스터마이징

갤러리 표시 옵션:

  • 그리드 뷰: 썸네일 격자 배열
  • 슬라이드쇼: 자동 재생 이미지 슬라이더
  • 리스트 뷰: 파일명과 메타데이터 포함 목록
  • 카드 뷰: 카드 형태의 미디어 표시

고급 기능으로 업무 효율화

버전 관리

변경 이력: 수정 시 자동 백업 → 이전 버전 복구 가능
비교 기능: 두 버전 간 차이점 강조 표시로 변경사항을 명확히 파악할 수 있습니다.
버전 관리의 장점:

  • 실수로 삭제된 내용 복구
  • 협업 시 변경 이력 추적
  • 승인 전후 내용 비교
  • 롤백을 통한 안전한 업데이트

워크플로우 적용

승인 프로세스: 작성 → 검토 → 승인 단계 설정으로 품질 관리를 강화할 수 있습니다.
알림 통합: 이메일·슬랙으로 상태 변경 알림을 받아 실시간 협업이 가능합니다.
워크플로우 단계별 역할:

작성콘텐츠 작성자초안 작성, 수정작성 완료 시 검토자에게 알림
검토편집자/검토자내용 검토, 수정 요청승인/반려 시 작성자에게 알림
승인관리자최종 승인, 게시게시 완료 시 관련자에게 알림

다국어 지원

언어별 콘텐츠: 한글·영문·중문 버전 병행 관리로 글로벌 서비스가 가능합니다.
자동 번역: Google Translate API 연동 (옵션)으로 번역 작업을 자동화할 수 있습니다.
다국어 관리 기능:

  • 언어별 독립적인 콘텐츠 관리
  • 번역 상태 추적 및 관리
  • 언어별 SEO 메타데이터 설정
  • 자동 언어 감지 및 리다이렉션

실전 예제: 이벤트 페이지 제작

단계별 진행

1단계: 구조 생성
이벤트명·기간·장소·신청링크 필드를 정의합니다.

필드 구성:
- 이벤트명 (텍스트)
- 이벤트 설명 (텍스트 박스)
- 시작일 (날짜)
- 종료일 (날짜)
- 장소 (텍스트)
- 신청 링크 (링크)
- 포스터 이미지 (이미지)
- 카테고리 (선택 목록)

2단계: 템플릿 디자인
반응형 그리드 레이아웃을 적용하여 모든 디바이스에서 최적화된 화면을 제공합니다.

3단계: 이미지 업로드
문서 라이브러리 /이벤트/2024 폴더에 배너를 저장하여 체계적으로 관리합니다.

4단계: 콘텐츠 게시
7일 전 자동 공개 설정으로 마케팅 타이밍을 최적화합니다.

이벤트 페이지 템플릿 예시

<div class="event-page">
    <div class="event-header">
        <img src="$posterImage.getData()" class="event-poster" alt="$eventName.getData()">
        <div class="event-info">
            <h1 class="event-title">$eventName.getData()</h1>
            <div class="event-meta">
                <p class="event-date">
                    <i class="icon-calendar"></i>
                    $startDate.getData() ~ $endDate.getData()
                </p>
                <p class="event-location">
                    <i class="icon-location"></i>
                    $location.getData()
                </p>
            </div>
            <a href="$registrationLink.getData()" class="btn btn-primary">
                지금 신청하기
            </a>
        </div>
    </div>
    <div class="event-description">
        $description.getData()
    </div>
</div>

CMS 최적화 팁

SEO 최적화

메타데이터 관리:

  • 페이지별 제목, 설명, 키워드 설정
  • Open Graph 태그 자동 생성
  • 구조화된 데이터 마크업 지원

URL 친화적 설정:

  • 의미 있는 URL 구조 생성
  • 자동 리다이렉션 관리
  • 사이트맵 자동 생성

성능 최적화

이미지 최적화:

  • 자동 이미지 압축 및 리사이징
  • WebP 형식 자동 변환
  • 레이지 로딩 적용

캐싱 전략:

  • 콘텐츠 캐싱으로 로딩 속도 향상
  • CDN 연동을 통한 글로벌 배포
  • 브라우저 캐싱 최적화

보안 강화

접근 권한 관리:

  • 역할 기반 권한 설정
  • IP 기반 접근 제한
  • 파일 업로드 보안 검사

콘텐츠 보안:

  • XSS 공격 방지
  • 악성 파일 업로드 차단
  • 콘텐츠 암호화 지원

마무리

Liferay CMS는 단순한 콘텐츠 관리를 넘어 디지털 경험의 핵심 플랫폼입니다. 웹 에디터부터 AI 기반 자동화까지, 모든 기능이 직관적인 인터페이스로 제공됩니다.
구조와 템플릿을 활용한 체계적인 콘텐츠 관리, 강력한 문서 라이브러리, 워크플로우 기반의 협업 시스템을 통해 전문적인 웹사이트를 누구나 쉽게 운영할 수 있습니다.
특히 다국어 지원과 버전 관리 기능은 글로벌 비즈니스 환경에서 필수적인 요소이며, 반응형 디자인과 SEO 최적화 기능은 현대적인 웹 표준을 완벽하게 지원합니다.
지금 바로 Liferay 공식 가이드를 참고해 첫 콘텐츠를 만들어보세요. 직관적인 인터페이스와 강력한 기능을 통해 비전문가도 전문가 수준의 웹사이트를 구축할 수 있을 것입니다.

반응형