[MOBILE-003][입문] 화면과 컴포넌트 연결해 이동 만들기
페이지 정보
본문
[이번 수업]
모바일 앱 UI를 화면, 컴포넌트, 내비게이션으로 나눕니다. 브라우저에서 홈과 학습 화면을 이동하며 뒤로 가기를 확인하는 프로토타입을 만듭니다.
[선수지식]
MOBILE-001의 앱 종류와 MOBILE-002의 개발환경·에뮬레이터 개념을 알면 좋습니다.
[학습목표]
1. 화면, 컴포넌트, 내비게이션의 책임을 구분합니다.
2. 재사용 카드와 두 화면을 연결합니다.
3. 뒤로 가기, 접근성, 안전한 경로 데이터를 점검합니다.
[핵심개념]
화면은 홈, 목록, 상세처럼 사용자가 한 가지 목적을 수행하는 목적지입니다.
컴포넌트는 버튼·카드·입력창처럼 재사용 가능한 UI 단위입니다. 내용은 입력값으로 받고 색상·여백·상호작용 규칙을 한곳에서 관리합니다.
내비게이션은 목적지와 연결, 현재 위치, 뒤로 가기 기록을 관리합니다. Android의 host·graph·controller·destination처럼 표시 자리, 경로, 이동 조정자, 목적지를 나눠 생각할 수 있습니다. 예제는 URL의 `#home`과 `#learn`을 경로로 사용합니다.
[따라하기]
아래 내용을 `mobile_ui.html`로 저장하세요. `card`는 컴포넌트, `screens` 함수는 화면, 해시 변경은 내비게이션 역할을 합니다.
```html
<!doctype html><html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>모바일 UI 연습</title>
<style>
body{font:16px sans-serif}.card{padding:12px;background:#eef}
nav{display:flex}button{flex:1;padding:16px}
</style>
<main id="app"></main>
<nav aria-label="주요 메뉴">
<button data-route="home">홈</button><button data-route="learn">학습</button>
</nav>
<script>
const app=document.querySelector("#app");
const card=(title,text)=>`<section class="card"><h2>${title}</h2><p>${text}</p></section>`;
const screens={
home:()=>`<h1>홈</h1>${card("목표","컴포넌트 이해하기")}`,
learn:()=>`<h1>학습</h1>${card("1단계","화면을 나누세요")}`
};
function render(){
const route=location.hash.slice(1)||"home";
app.innerHTML=(screens[route]||screens.home)();
document.querySelectorAll("button").forEach(button=>button.setAttribute(
"aria-current",button.dataset.route===route?"page":"false"));
}
document.querySelector("nav").onclick=event=>{
if(event.target.dataset.route)location.hash=event.target.dataset.route;
};
onhashchange=render;render();
</script></html>
```
macOS/Linux는 파일 폴더에서 `python3 -m http.server 8000`, Windows PowerShell은 `python -m http.server 8000`을 실행하고 `http://localhost:8000/mobile_ui.html`을 엽니다. 버튼을 누르면 주소와 내용이 바뀌고 뒤로 가기가 동작해야 합니다. `Ctrl+C`로 종료합니다.
[흔한 실수]
모든 코드를 한 화면에 넣거나 화면마다 같은 카드를 복사하지 마세요. 버튼과 목적지 이름이 어긋나면 직접 링크와 뒤로 가기가 혼란스러워집니다. 가로 방향, 넓은 창, 큰 글자에서도 확인하고 선택 탭과 입력 상태의 유지 정책도 정합니다.
[보안 주의]
예제의 `innerHTML`에는 고정 문자열만 넣었습니다. 사용자 입력이나 서버 응답은 그대로 삽입하지 말고 안전한 텍스트 API를 사용하세요. 경로·딥링크에 비밀번호·토큰·개인정보를 넣지 않습니다. 외부 링크는 형식을 검사하고 화면을 숨기는 것과 별개로 서버에서도 권한을 확인합니다.
[직접 해볼 과제]
`settings` 화면과 설정 버튼을 추가하고 카드 컴포넌트를 두 번 재사용하세요. 제목, 선택 버튼, 뒤로 가기가 올바른지 좁고 넓은 창에서 확인합니다.
[확인문제]
1. 화면과 컴포넌트는 책임이 어떻게 다른가요?
2. 내비게이션이 현재 목적지 외에 관리해야 할 것은 무엇인가요?
3. 토큰을 경로나 딥링크에 넣으면 안 되는 이유는 무엇인가요?
[다음 학습]
전체 순환의 다음 수업은 IOT-003 ‘C·C++·MicroPython 선택’입니다. 이어서 MOBILE-004 ‘상태관리와 생명주기’를 배웁니다.
[공식 참고 자료]
Android 내비게이션: https://developer.android.com/guide/navigation
Android 적응형 앱: https://developer.android.com/develop/ui/compose/layouts/adaptive/get-started-with-adaptive-apps
Apple SwiftUI 내비게이션: https://developer.apple.com/documentation/swiftui/navigation
Apple 내비게이션 지침: https://developer.apple.com/design/human-interface-guidelines/navigation-and-search
W3C 모바일 접근성: https://www.w3.org/WAI/standards-guidelines/mobile/
모바일 앱 UI를 화면, 컴포넌트, 내비게이션으로 나눕니다. 브라우저에서 홈과 학습 화면을 이동하며 뒤로 가기를 확인하는 프로토타입을 만듭니다.
[선수지식]
MOBILE-001의 앱 종류와 MOBILE-002의 개발환경·에뮬레이터 개념을 알면 좋습니다.
[학습목표]
1. 화면, 컴포넌트, 내비게이션의 책임을 구분합니다.
2. 재사용 카드와 두 화면을 연결합니다.
3. 뒤로 가기, 접근성, 안전한 경로 데이터를 점검합니다.
[핵심개념]
화면은 홈, 목록, 상세처럼 사용자가 한 가지 목적을 수행하는 목적지입니다.
컴포넌트는 버튼·카드·입력창처럼 재사용 가능한 UI 단위입니다. 내용은 입력값으로 받고 색상·여백·상호작용 규칙을 한곳에서 관리합니다.
내비게이션은 목적지와 연결, 현재 위치, 뒤로 가기 기록을 관리합니다. Android의 host·graph·controller·destination처럼 표시 자리, 경로, 이동 조정자, 목적지를 나눠 생각할 수 있습니다. 예제는 URL의 `#home`과 `#learn`을 경로로 사용합니다.
[따라하기]
아래 내용을 `mobile_ui.html`로 저장하세요. `card`는 컴포넌트, `screens` 함수는 화면, 해시 변경은 내비게이션 역할을 합니다.
```html
<!doctype html><html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>모바일 UI 연습</title>
<style>
body{font:16px sans-serif}.card{padding:12px;background:#eef}
nav{display:flex}button{flex:1;padding:16px}
</style>
<main id="app"></main>
<nav aria-label="주요 메뉴">
<button data-route="home">홈</button><button data-route="learn">학습</button>
</nav>
<script>
const app=document.querySelector("#app");
const card=(title,text)=>`<section class="card"><h2>${title}</h2><p>${text}</p></section>`;
const screens={
home:()=>`<h1>홈</h1>${card("목표","컴포넌트 이해하기")}`,
learn:()=>`<h1>학습</h1>${card("1단계","화면을 나누세요")}`
};
function render(){
const route=location.hash.slice(1)||"home";
app.innerHTML=(screens[route]||screens.home)();
document.querySelectorAll("button").forEach(button=>button.setAttribute(
"aria-current",button.dataset.route===route?"page":"false"));
}
document.querySelector("nav").onclick=event=>{
if(event.target.dataset.route)location.hash=event.target.dataset.route;
};
onhashchange=render;render();
</script></html>
```
macOS/Linux는 파일 폴더에서 `python3 -m http.server 8000`, Windows PowerShell은 `python -m http.server 8000`을 실행하고 `http://localhost:8000/mobile_ui.html`을 엽니다. 버튼을 누르면 주소와 내용이 바뀌고 뒤로 가기가 동작해야 합니다. `Ctrl+C`로 종료합니다.
[흔한 실수]
모든 코드를 한 화면에 넣거나 화면마다 같은 카드를 복사하지 마세요. 버튼과 목적지 이름이 어긋나면 직접 링크와 뒤로 가기가 혼란스러워집니다. 가로 방향, 넓은 창, 큰 글자에서도 확인하고 선택 탭과 입력 상태의 유지 정책도 정합니다.
[보안 주의]
예제의 `innerHTML`에는 고정 문자열만 넣었습니다. 사용자 입력이나 서버 응답은 그대로 삽입하지 말고 안전한 텍스트 API를 사용하세요. 경로·딥링크에 비밀번호·토큰·개인정보를 넣지 않습니다. 외부 링크는 형식을 검사하고 화면을 숨기는 것과 별개로 서버에서도 권한을 확인합니다.
[직접 해볼 과제]
`settings` 화면과 설정 버튼을 추가하고 카드 컴포넌트를 두 번 재사용하세요. 제목, 선택 버튼, 뒤로 가기가 올바른지 좁고 넓은 창에서 확인합니다.
[확인문제]
1. 화면과 컴포넌트는 책임이 어떻게 다른가요?
2. 내비게이션이 현재 목적지 외에 관리해야 할 것은 무엇인가요?
3. 토큰을 경로나 딥링크에 넣으면 안 되는 이유는 무엇인가요?
[다음 학습]
전체 순환의 다음 수업은 IOT-003 ‘C·C++·MicroPython 선택’입니다. 이어서 MOBILE-004 ‘상태관리와 생명주기’를 배웁니다.
[공식 참고 자료]
Android 내비게이션: https://developer.android.com/guide/navigation
Android 적응형 앱: https://developer.android.com/develop/ui/compose/layouts/adaptive/get-started-with-adaptive-apps
Apple SwiftUI 내비게이션: https://developer.apple.com/documentation/swiftui/navigation
Apple 내비게이션 지침: https://developer.apple.com/design/human-interface-guidelines/navigation-and-search
W3C 모바일 접근성: https://www.w3.org/WAI/standards-guidelines/mobile/
- 이전글[IOT-003][입문] 조건을 비교해 C·C++·MicroPython 고르기 26.08.30
- 다음글[SWE-003][입문] 단위·통합·E2E 테스트의 범위 구분하기 26.08.30
댓글목록
등록된 댓글이 없습니다.