참석자 사용 가이드¶

이 가이드는 Open Codelabs 핸즈온 세션에 참석자(Attendee)로 참여하는 분들을 위한 매뉴얼입니다.

1. 시작하기¶

Open Codelabs란?¶

Google Codelab 스타일의 단계별 학습 플랫폼입니다. 실습 중심의 핸즈온 워크샵에서 자신의 속도로 학습할 수 있습니다.

참석자 역할¶

제공된 코드랩을 단계별로 따라하기
각 단계를 완료하며 진행
필요시 피드백 및 질문 남기기

2. 접속하기¶

2-1. 접속 URL 받기¶

세션 진행자(퍼실리테이터)로부터 다음 중 하나를 받게 됩니다: - QR 코드: 스마트폰으로 스캔 - 접속 URL: 브라우저에 직접 입력

2-2. 접속 방법¶

QR 코드로 접속¶

스마트폰 카메라 또는 QR 스캐너 앱 실행
화면에 표시된 QR 코드 스캔
자동으로 브라우저가 열리며 시스템 접속

URL로 접속¶

웹 브라우저 실행 (Chrome, Firefox, Safari 등)
제공받은 URL 입력
예: http://localhost:5173
예: https://xxxxx.ngrok.io
엔터키를 눌러 접속

권장 브라우저

최상의 경험을 위해 Chrome 또는 Edge 브라우저 사용을 권장합니다.

3. 코드랩 선택하기¶

메인 페이지¶

접속하면 코드랩 목록이 표시됩니다: - 제목 - 간단한 설명 - 예상 소요 시간 - 태그 (주제, 난이도 등)

코드랩 선택¶

참여하고 싶은 코드랩 클릭
코드랩 상세 페이지로 이동
"시작하기" 버튼 클릭

4. 코드랩 진행하기¶

4-1. 화면 구성¶

코드랩 화면은 크게 3가지 영역으로 구성됩니다:

왼쪽: 목차 (Table of Contents)¶

전체 단계 목록
현재 진행 중인 단계 표시
완료한 단계는 체크 표시 ✓

가운데: 콘텐츠 영역¶

현재 단계의 설명 및 지침
코드 예제
이미지 및 다이어그램

오른쪽: 진행 바¶

전체 진행률 표시
예상 남은 시간

4-2. 단계별 진행¶

각 단계를 다음과 같이 진행하세요:

읽기: 단계의 설명을 꼼꼼히 읽기
실습: 제공된 코드나 명령어를 직접 실행
확인: 결과가 예상과 같은지 확인
다음: 하단의 "Next" 버튼을 눌러 다음 단계로 이동

학습 팁

급하게 진행하지 말고 각 단계를 충분히 이해하고 넘어가세요
코드를 복사-붙여넣기만 하지 말고 직접 타이핑해보세요
막히는 부분이 있으면 주저 없이 질문하세요

4-3. 코드 복사하기¶

코드 블록이 있을 때:

echo "Hello, World!"

코드 블록 우측 상단의 복사 아이콘 클릭
터미널이나 에디터에 붙여넣기
실행 후 결과 확인

5. 진행 상황 저장¶

자동 저장¶

다음 단계로 넘어갈 때마다 자동으로 진행 상황이 저장됩니다
브라우저를 닫아도 다시 접속하면 이어서 진행 가능

중간에 나갔다가 다시 들어오기¶

같은 URL로 다시 접속
이전에 진행하던 코드랩 선택
자동으로 마지막으로 진행한 단계로 이동

쿠키 및 로컬 스토리지

진행 상황은 브라우저에 저장됩니다. 브라우저 쿠키를 삭제하면 진행 상황이 초기화될 수 있습니다.

6. 피드백 남기기¶

피드백 제공 방법¶

각 단계 하단에 피드백 입력란이 있습니다: 1. 의견이나 질문 입력 2. "Submit Feedback" 버튼 클릭 3. 진행자가 실시간으로 확인 가능

어떤 피드백을 남길 수 있나요?¶

이해하기 어려운 부분
오류나 문제 발생 시
추가 설명이 필요한 부분
개선 아이디어

7. 완료하기¶

모든 단계 완료 시¶

"완료" 메시지 표시
진행률 100% 달성
필요시 수료증 또는 인증 제공 (세션에 따라 다름)

완료 후 할 수 있는 것¶

다른 코드랩 탐색
완료한 코드랩 다시 복습
진행자에게 추가 자료 요청

8. 자주 묻는 질문 (FAQ)¶

Q1. 중간에 멈췄다가 나중에 다시 할 수 있나요?¶

A. 네, 가능합니다. 같은 브라우저로 같은 URL에 접속하면 이어서 진행할 수 있습니다.

Q2. 다른 기기에서도 이어서 할 수 있나요?¶

A. 현재 버전에서는 브라우저별로 진행 상황이 저장됩니다. 동일한 계정 기능이 추가되면 다른 기기에서도 이어서 할 수 있습니다.

Q3. 진행 속도가 다른 사람들과 다른데 괜찮나요?¶

A. 전혀 문제없습니다! 각자의 속도로 학습하는 것이 가장 효과적입니다.

Q4. 이전 단계로 돌아갈 수 있나요?¶

A. 네, 왼쪽 목차에서 이전 단계를 클릭하면 언제든지 돌아갈 수 있습니다.

Q5. 코드를 실행했는데 오류가 나요¶

A. 다음을 확인해보세요: - 코드를 정확히 복사했는지 - 이전 단계를 모두 완료했는지 - 환경 설정이 올바른지 - 진행자에게 도움 요청

Q6. 코드랩을 완료하면 무엇을 받나요?¶

A. 세션에 따라 다릅니다. 진행자가 수료증, 자료, 또는 추가 학습 자료를 제공할 수 있습니다.

9. 키보드 단축키¶

편리한 학습을 위한 단축키:

키	기능
`→` (오른쪽 화살표)	다음 단계로 이동
`←` (왼쪽 화살표)	이전 단계로 이동
`Ctrl/Cmd + K`	검색 (있는 경우)

10. 문제 해결¶

페이지가 로딩되지 않아요¶

인터넷 연결 확인
브라우저 새로고침 (F5 또는 Cmd+R)
진행자에게 URL 재확인

코드 복사가 안 돼요¶

복사 버튼 대신 마우스로 드래그하여 복사
또는 코드를 직접 타이핑

진행 상황이 저장되지 않아요¶

브라우저의 쿠키 및 로컬 스토리지 허용 여부 확인
시크릿/프라이빗 모드가 아닌지 확인

11. 학습을 최대한 활용하기¶

실습 전¶

[ ] 필요한 도구 및 소프트웨어 설치 확인
[ ] 안정적인 인터넷 연결 확인
[ ] 방해받지 않을 환경 준비

실습 중¶

[ ] 코드를 직접 타이핑하며 이해하기
[ ] 각 단계의 "왜?"를 생각하며 진행하기
[ ] 막히면 바로 질문하기

실습 후¶

[ ] 완료한 코드랩을 다시 한번 복습하기
[ ] 배운 내용을 실제 프로젝트에 적용해보기
[ ] 관련된 다른 코드랩 탐색하기

12. 추가 리소스¶

FAQ
퍼실리테이터 가이드 (세션 운영 방법 궁금하다면)
GitHub Repository

즐거운 학습 되세요!

Open Codelabs와 함께 즐겁고 효과적인 학습 경험을 하시길 바랍니다! 🚀