반응형 뷰와 반응형 표시

Zittme는 기존의 PC / 모바일 두 갈래에 반응형을 더했습니다. 이 문서는 두 가지를 다룹니다: 사이트가 화면 폭으로 동작을 바꾸는 반응형 뷰, 그리고 제작자가 자기 스킨·레이아웃이 반응형임을 밝히는 반응형 표시.

반응형 뷰란

기존 엔진은 기기 종류(휴대폰인가 아닌가)로 PC/모바일을 판별했습니다. 반응형 뷰는 그 대신 화면 폭을 기준으로 판별합니다.

• 하나의 스킨(PC용 마크업)을 그대로 쓰면서,
• 화면 폭이 768px 이하로 좁아지면 엔진이 모바일 쪽 설정값을 적용합니다: 에디터 설정, 목록 개수, 페이지네이션 개수, 헤더/푸터 문구.

즉 모바일 스킨을 따로 만들지 않아도 좁은 화면에 맞는 설정이 따라옵니다. 실험적 기능이며 기본값은 꺼짐입니다.

판별 기준 폭은 768px입니다 (Mobile::NARROW_BREAKPOINT, common/js/responsive-view.js 의 BREAKPOINT). 스킨이 다른 중단점을 쓰는 것은 자유지만, 이 경계에서 엔진 설정값이 바뀐다는 점은 알고 있어야 합니다.

반응형 표시: 스킨·레이아웃 제작자용

왜 표시가 필요한가

기존에는 폴더가 곧 구분이었습니다: skins/ 는 PC용, m.skins/ 는 모바일 전용. 그런데 반응형 스킨은 PC 스킨과 별개의 물건이 아니라 "그 스킨이 좁은 화면까지 감당한다"는 성질입니다. 그래서 폴더가 아니라 메타데이터에 적습니다.

표시 방법

스킨은 skin.xml, 레이아웃은 conf/info.xml 맨 위에 한 줄 넣습니다.

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 스킨</title>
	...
</skin>

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 레이아웃</title>
	...
</layout>

true, y, 1 중 하나면 반응형으로 봅니다(대소문자 무관). 값이 없거나 다른 값이면 반응형이 아닙니다.

기본값은 "반응형 아님"

표시가 없는 기존 스킨은 모두 반응형이 아닌 것으로 봅니다. 이미 반응형으로 만들어진 스킨이라면 <responsive>true</responsive> 한 줄만 추가하면 되고, 그 외에 고칠 것은 없습니다.

true 로 선언한다는 것의 의미

• 하나의 마크업·CSS로 넓은 화면과 좁은 화면을 모두 감당합니다. 좁은 화면에서 가로 스크롤이 생기거나 요소가 잘리면 안 됩니다.
• 좁은 화면에서는 모바일 설정값(에디터·목록 수·페이지네이션·헤더/푸터)이 적용될 수 있다는 전제로 만들어야 합니다.
• 레이아웃이라면 좁은 화면에서 메뉴가 접히는 등 형태가 대응해야 합니다.

엔진이 이 값을 쓰는 곳

• 스킨·레이아웃 선택 화면: 반응형인 것에 배지를 붙입니다.
• 뷰 방식 변경: 반응형 뷰로 바꾸려는데 고른 스킨이 반응형이 아니면 경고합니다. 막지는 않습니다.
• 테마 패키지 검증: 반응형을 선언한 테마는 구성요소 스킨·레이아웃이 모두 반응형이어야 합니다. (테마 패키지 만들기 참고)

코드에서 확인하기

$skin_info = ModuleModel::loadSkinInfo($module_path, $skin_name);
if ($skin_info->responsive)
{
    // 반응형 스킨
}

호환성

• 기존 스킨은 그대로 동작합니다. 값이 없으면 false일 뿐 아무것도 깨지지 않습니다.
• <responsive> 가 있는 스킨을 라이믹스에 설치해도 문제없습니다: 엔진은 모르는 요소를 무시합니다.
• 이 표시는 Zittme 고유이며 업스트림 라이믹스에는 없습니다.