galaxy.css

Android 2.3 / TouchWiz 3.0 설정 화면을 위한 CSS와 작동하는 구성 요소 데모입니다. 98.css처럼 일반 HTML과 CSS로 사용하며, 프레임워크나 빌드 과정이 필요하지 않습니다.

index.html을 브라우저에서 바로 열면 됩니다. 정적 웹 서버에서도 사용할 수 있습니다.

python -m http.server 8080
# http://localhost:8080

사용하기

css/, font/, img/의 상대 경로를 유지해서 복사하세요. 선택 동작이 필요하면 js/galaxy.js도 복사합니다. demo.css와 demo.js는 문서용이며 라이브러리에 필요하지 않습니다.

<link rel="stylesheet" href="css/galaxy.css">
<!-- 탭, 대화상자, 토스트, 드래그 스크롤을 사용할 때 추가 -->
<script src="js/galaxy.js" defer></script>

<main class="tw-ui tw-window">
  <header class="tw-titlebar"><h1>환경설정</h1></header>
  <h2 class="tw-category">무선 및 네트워크</h2>
  <label class="tw-preference">
    <span class="tw-label">Wi-Fi
      <span class="tw-summary">무선 네트워크 사용</span>
    </span>
    <input type="checkbox" checked>
  </label>
  <div class="tw-inset"><button type="button">확인</button></div>
</main>

.tw-ui 안에서만 스타일이 적용됩니다. .tw-window는 최대 폭 800px, 수평 중앙 정렬을 제공합니다. 본문은 DroidSansFallback.ttf, 굵은 글자는 DroidSans-Bold.ttf, 코드는 DroidSansMono.ttf를 사용합니다. 굵은 글꼴에 없는 문자는 별도로 등록한 Droid Sans Fallback 글꼴로 폴백합니다.

구성 요소

구성 요소	HTML / 클래스	JavaScript
제목 표시줄	.tw-titlebar	불필요
설정 섹션 / 목록	.tw-category, .tw-preference	불필요
제목 / 보조 설명 / 아이콘	.tw-label, .tw-summary, .tw-icon	불필요
체크박스 / 라디오	input[type="checkbox"], input[type="radio"]	불필요
버튼	button, input[type="submit"] 등	앱 동작에 따라 연결
입력 / 선택 메뉴	input, textarea, select, .tw-field	불필요
슬라이더 / 진행률	input[type="range"], progress	슬라이더 진행 색상 동기화
로딩 표시	.tw-spinner, 값 없는 progress	불필요
탭	.tw-tabs[data-tw-tabs], .tw-tab	galaxy.js
대화상자	dialog.tw-dialog, data-tw-open, data-tw-close	galaxy.js
토스트	TouchWiz.toast(message)	galaxy.js
상태 바	.tw-statusbar	불필요, 명시적으로 활성화
화면 전환	.tw-screen-enter, .tw-screen-back	클래스 변경
드래그 스크롤	.tw-content[data-tw-drag-scroll]	galaxy.js

index.html에서 각 항목을 누르면 실제 구현과 HTML·관련 CSS·JavaScript 소스를 확인하고 복사할 수 있습니다. 브라우저 뒤로/앞으로 가기와 #checkboxes 등의 직접 링크를 지원합니다. 상단 뒤로 버튼은 설정 홈으로 돌아갑니다. 소스 코드는 텍스트로 선택할 수 있습니다.

상태 바: Opt-in

기본 상태에서는 표시되지 않습니다. **상태 바의 직접 부모인 .tw-ui**에 data-statusbar="true"를 넣어 활성화합니다. 예시 아이콘은 실제 기기 상태를 조회하지 않습니다.

<main class="tw-ui tw-window" data-statusbar="true">
  <div class="tw-statusbar" aria-label="예시 상태 바">
    <span>SKTelecom</span>
    <img src="img/touchwiz/stat_sys_signal_4_cdma.png" alt="신호 양호">
    <img src="img/touchwiz/stat_sys_battery_100.png" alt="배터리 가득 참">
    <time>오후 12:00</time>
  </div>
  <!-- 앱 내용 -->
</main>

드래그, 애니메이션, 접근성

<div class="tw-ui">
  <div class="tw-content" data-tw-drag-scroll
       style="height: 400px" tabindex="0" aria-label="설정 목록">
    <!-- 스크롤할 내용 -->
  </div>
</div>

마우스를 6px 이상 세로로 움직이면 드래그로 구분하고, 뒤따르는 클릭을 취소합니다. 놓은 속도에 따라 관성 스크롤을 적용합니다. 입력·버튼·소스 코드 영역은 제외하며, data-no-drag로 추가 제외할 수 있습니다. 휠과 키보드는 기본 동작을 유지하고, 터치는 브라우저의 기본 스크롤을 사용합니다. 중첩 스크롤에서는 가장 가까운 컨테이너만 드래그합니다.

CSS 전환 시간은 --tw-duration(기본 220ms)으로 조절합니다. prefers-reduced-motion: reduce에서는 애니메이션과 관성 스크롤을 생략합니다. 탭은 방향키/Home/End, 대화상자는 네이티브 포커스 트랩과 Esc, 폼은 label 및 기본 키보드 조작을 지원합니다. 펼친 select 옵션은 운영체제 기본 UI입니다.

선택 JavaScript API

TouchWiz.init(); // 초기 실행은 자동. 동적 DOM 추가 후 다시 호출 가능
TouchWiz.init(container); // 해당 컨테이너 내부 초기화
TouchWiz.dragScroll(element); // 특정 요소에 마우스 드래그 추가
TouchWiz.openDialog(document.getElementById('my-dialog'));
TouchWiz.closeDialog(document.getElementById('my-dialog'), 'confirm');
TouchWiz.toast('설정을 저장했습니다.');
TouchWiz.activateTab(document.getElementById('my-tab'), true);

일반 HTML 컨트롤 스타일에는 JavaScript가 필요하지 않습니다. 이 데모의 메뉴 탐색과 소스 표시에는 demo.js가 필요합니다. 최신 Chrome/Edge/Firefox/Safari를 대상으로 하며, Android 2.2 브라우저 자체에 대한 호환성을 뜻하지 않습니다. dialog, Pointer Events, CSS 사용자 정의 속성을 사용합니다.

참조 자료와 리소스

디자인 목표는 Android 2.2 / TouchWiz 3.0입니다. 다만 제공된 rootfs/build.prop는 SHW-M110S, Android 2.3.6, GINGERBREAD.WF07, API 10입니다. 해당 펌웨어에서 공유되는 설정 아이콘과 컨트롤을 재사용하고 CSS로 레이아웃을 재현했습니다. 특정 Android 2.2 펌웨어와 픽셀 단위의 일치를 보장하지 않습니다.

• rootfs/app/Settings.apk: 설정 아이콘
• rootfs/framework/twframework-res.apk: 체크박스, 라디오, 버튼, 진행 표시 이미지
• rootfs/framework/framework-res.apk: 상태 바 아이콘과 로딩 이미지
• font/: 저장소에 제공된 Droid 글꼴

img/touchwiz/의 PNG는 APK의 res/drawable-hdpi/에서 추출한 원본입니다. 컴파일된 9-patch PNG는 버튼 등에서 CSS border-image로 사용합니다. 추출 스크립트를 다시 실행할 수 있습니다.

powershell -ExecutionPolicy Bypass -File tools/extract-assets.ps1

원본 이미지·글꼴의 권리는 각 권리자에게 있으며, 이 저장소는 해당 리소스에 별도의 재배포 라이선스를 부여하지 않습니다. 데모를 실행할 때 rootfs/는 필요하지 않습니다.