참석자 사용 가이드¶

이 문서는 Open Codelabs에 참석자(Attendee)로 참여하는 분들을 위한 실사용 가이드입니다. 현재 구현 기준으로, 참가 등록부터 학습 진행, 질문, 제출, 수료증 발급까지 한 번에 이해할 수 있도록 정리했습니다.

먼저 알아두세요

워크샵마다 보이는 기능이 조금씩 다를 수 있습니다. 예를 들어 가이드, 자료, 채팅, 화면 공유, 제출물, 퀴즈, Gemini, 수료증은 세션 설정에 따라 보이거나 숨겨질 수 있습니다.

1. 시작 전에¶

권장 환경¶

브라우저: Chrome 또는 Edge 권장
네트워크: 안정적인 인터넷 연결
저장 허용: 브라우저의 쿠키 / 로컬 스토리지 허용
실습 환경: 세션에서 안내한 IDE, 터미널, 계정, 샘플 코드 준비

모바일도 열 수는 있지만

읽기 위주 학습은 모바일에서도 가능하지만, 실습 입력, 파일 제출, 채팅, 화면 공유까지 고려하면 노트북 또는 데스크톱 사용이 훨씬 편합니다.

2. 접속하고 참가 등록하기¶

2-1. 접속 링크 받기¶

퍼실리테이터에게서 아래 중 하나를 받게 됩니다.

QR 코드
직접 접속 URL

예시:

http://localhost:5173
https://your-workshop-url.example.com

2-2. 코드랩 목록에서 세션 선택하기¶

접속하면 참가자용 코드랩 목록이 열립니다.

공개된 코드랩만 목록에 표시됩니다.
검색창에서 제목이나 설명으로 빠르게 찾을 수 있습니다.
이미 참여했던 서버리스 세션에서는 다시 이어서 들어갈 수 있는 목록이 따로 보일 수 있습니다.

2-3. 참가 등록하기¶

코드랩을 선택하면 등록 화면이 열립니다. 일반적으로 다음 항목을 입력합니다.

닉네임: 필수
이메일: 선택
고유 코드: 필수

고유 코드는 다시 들어올 때 중요합니다

같은 닉네임으로 다시 접속하려면 이전에 쓴 고유 코드와 동일해야 같은 참가자로 이어집니다. 닉네임만 같고 코드가 다르면 중복 닉네임으로 처리되어 입장하지 못할 수 있습니다.

2-4. Google 로그인¶

일부 서버리스 배포 환경에서는 Google 로그인 버튼이 보일 수 있습니다.

버튼이 보이면 Google 계정으로 바로 참가 등록할 수 있습니다.
버튼이 없다면 일반 닉네임 + 코드 방식으로 참가하면 됩니다.

2-5. 다시 들어오기¶

같은 브라우저에서는 참가 정보와 진행 위치가 저장되어, 재접속 시 자동으로 이어서 들어갈 수 있습니다.

다시 접속이 안 된다면 아래를 확인하세요.

다른 브라우저를 사용하고 있지 않은지
시크릿/프라이빗 모드인지
쿠키/로컬 스토리지를 지우지 않았는지
닉네임과 고유 코드를 정확히 기억하는지

3. 학습 화면 빠르게 익히기¶

참가자 화면은 크게 네 영역으로 보면 편합니다.

위치	역할
왼쪽 사이드바	스텝 목록, 자료, 제출물 확인
상단 바	가이드, 플레이그라운드, 채팅, 프로필, 화면 공유
가운데 본문	현재 스텝 설명, 코드, 이미지, 인라인 댓글, 읽어주기(TTS)
오른쪽 채팅 패널	참가자 목록, 공개 채팅, 1:1 DM

꼭 알아두면 좋은 버튼¶

Guide: 세션 전체 가이드 보기
Code: 플레이그라운드 패널 열기
Chat: 공개 채팅 / DM 열기
Profile: 내 이름 확인
Screen Share: 퍼실리테이터 화면 보기 또는 내 화면 공유

첫 방문 시 가이드가 자동으로 열릴 수 있습니다

퍼실리테이터가 가이드를 준비해 둔 세션이라면, 처음 들어왔을 때 Guide 패널이 먼저 열릴 수 있습니다. 세션 목표, 준비물, 사전 설명을 먼저 읽고 시작하세요.

4. 단계별로 학습 진행하기¶

4-1. 스텝 이동¶

학습은 스텝 단위로 진행됩니다.

왼쪽 스텝 목록에서 원하는 단계로 바로 이동
하단의 이전 / 다음 버튼으로 순서대로 진행
이미 본 단계는 언제든 다시 돌아가서 복습 가능

4-2. 진행 위치 저장¶

현재 진행 중인 단계는 브라우저에 자동 저장됩니다.

같은 브라우저로 다시 접속하면 이어서 진행 가능
다른 브라우저나 다른 기기에서는 같은 위치가 자동 복원되지 않을 수 있음

4-3. 코드와 명령어 실행¶

본문에는 Markdown 기반 설명과 코드 블록이 표시됩니다.

코드는 복사해서 IDE, 터미널, 브라우저 콘솔 등에 붙여 넣어 실행
이미지, 링크, 외부 문서가 함께 제공될 수 있음
YouTube 링크가 포함된 경우 본문에서 바로 재생될 수 있음

4-4. 읽어주기(TTS)¶

읽기 버튼이 보이면 현재 단계의 제목과 내용을 음성으로 읽을 수 있습니다.

길게 읽어야 하는 설명을 귀로 듣고 싶을 때 유용
다시 누르면 중지

5. 추가 학습 도구 사용하기¶

5-1. Guide 보기¶

Guide는 보통 세션 전체를 위한 상단 설명입니다.

준비물
실습 전 설정
전체 진행 흐름
각 단계에 들어가기 전 공통 안내

처음 방문 시 자동으로 열릴 수 있고, 이후에는 상단의 Guide 버튼으로 다시 열 수 있습니다.

5-2. 자료(Materials) 다운로드¶

퍼실리테이터가 자료를 추가해 두었다면 왼쪽 사이드바에 표시됩니다.

링크 자료: 클릭해서 새 탭에서 열기
파일 자료: 다운로드해서 열기

예를 들어 이런 자료가 포함될 수 있습니다.

PDF 핸드아웃
실습용 샘플 파일
참고 링크
API 문서

5-3. Playground 사용하기¶

일부 코드랩은 본문에서 바로 실행해 볼 수 있는 Playground를 제공합니다.

현재 세션 내용에 따라 다음과 같은 외부 실행 환경이 연결될 수 있습니다.

DartPad
Go Playground
Pyodide
JupyterLite

활용 방법:

상단의 Code 버튼 클릭
언어 탭 선택
예제 코드 복사
새 탭으로 열거나, 가능한 경우 패널 안에서 바로 실행

5-4. Ask Gemini 사용하기¶

세션 중 궁금한 부분이 있으면 본문에서 텍스트를 드래그해 Ask Gemini를 열 수 있습니다.

사용 흐름:

본문에서 궁금한 문장을 드래그
떠오르는 메뉴에서 Ask Gemini 클릭
Gemini API 키를 입력하거나 저장
질문 입력 후 답변 받기

Gemini는 개인 키를 사용합니다

참가자용 Gemini는 일반적으로 브라우저에 저장한 개인 API 키를 사용합니다. 세션 운영 방식에 따라 AI 기능이 보이지 않거나 사용하지 않을 수도 있습니다.

6. 질문하고 소통하기¶

6-1. 도움 요청 보내기¶

현재 단계에서 막혔다면 Help 요청을 보낼 수 있습니다.

요청 시 현재 스텝 번호가 함께 전달됩니다.
퍼실리테이터가 어느 단계에서 막혔는지 바로 확인할 수 있습니다.
막혔을 때는 채팅 전에 Help 요청부터 보내는 것이 더 빠를 수 있습니다.

6-2. 채팅 패널 사용하기¶

채팅 패널에는 3가지 탭이 있습니다.

Participants: 참가자 목록 보기
Public Chat: 모두가 보는 공개 채팅
Direct Messages: 퍼실리테이터 또는 다른 참가자와 1:1 대화

공개 채팅에 적합한 내용:

공통 질문
공지 확인
다른 사람도 궁금해할 만한 내용

DM에 적합한 내용:

개인 진행 상황
제출물 확인 요청
공개로 쓰기 어려운 질문

6-3. 채팅에 이미지 올리기¶

채팅 입력창 옆 업로드 버튼으로 이미지를 보낼 수 있습니다.

스크린샷 공유
오류 화면 전달
결과물 이미지 전달

이미지가 업로드되면 채팅 안에서 바로 미리 볼 수 있습니다.

6-4. 본문에 인라인 댓글 남기기¶

질문을 더 정확하게 남기고 싶다면 본문 텍스트를 선택해 코멘트 남기기를 사용할 수 있습니다.

이 방식이 특히 좋은 경우:

특정 문장 하나가 이해되지 않을 때
코드 한 줄에 대해 질문할 때
가이드와 실제 동작이 다를 때

7. 화면 공유 사용하기¶

7-1. 퍼실리테이터 화면 보기¶

퍼실리테이터가 화면을 공유하면 참가자 화면에 작은 모니터 창이 나타날 수 있습니다.

최소화 / 확대 가능
진행자가 현재 어디를 설명하는지 바로 따라가기 좋음
라이브 데모를 놓쳤을 때 다시 시선을 맞추기 좋음

7-2. 내 화면 공유하기¶

필요하면 내 화면을 퍼실리테이터에게 공유할 수도 있습니다.

활용 예:

오류 상황 직접 보여주기
내가 어디까지 했는지 빠르게 확인받기
코드, 터미널, 브라우저 상태를 같이 보여주기

브라우저에서 화면 공유 권한을 묻는 경우 허용해야 합니다.

화면 공유 전 확인

화면 전체를 공유하면 민감한 정보가 함께 보일 수 있습니다. 가능하면 필요한 창만 공유하고, 비밀번호 / 개인 메신저 / 개인 파일이 보이지 않는지 먼저 확인하세요.

8. 과제 제출, 퀴즈, 피드백¶

8-1. 제출물 업로드¶

세션에서 제출물을 받는 경우 왼쪽 사이드바나 완료 화면에 제출 패널이 보입니다.

지원 방식:

파일 업로드
링크 제출

현재 구현 기준 제한:

파일당 최대 5MB
총 제출 용량 10MB
이미지 제출물은 서버에서 WebP로 변환될 수 있음
HEIC / HEIF는 지원되지 않음

링크 제출이 안 보일 수도 있습니다

배포 모드에 따라 링크 제출이 비활성화되거나 동작하지 않을 수 있습니다. 이 경우 파일 업로드 방식으로 제출하거나 퍼실리테이터 안내를 따르세요.

8-2. 퀴즈 응시¶

퀴즈가 설정된 세션이라면 마지막 단계 근처 또는 완료 화면에서 문제를 풀게 됩니다.

객관식
복수 선택형
서술형

세션 설정에 따라:

퀴즈가 단순 확인용일 수 있음
또는 수료증 발급 전 필수 조건일 수 있음

8-3. 피드백 제출¶

마지막에는 보통 학습 만족도와 난이도에 대한 피드백 폼이 나옵니다.

입력 가능한 항목:

만족도
난이도
자유 의견

세션에 따라 피드백 제출이 수료 조건일 수 있으므로, 끝까지 제출하는 것을 권장합니다.

9. 완료와 수료증¶

9-1. 수료 버튼 누르기¶

모든 단계를 마치면 완료 화면이 열립니다. 세션 설정에 따라 아래 조건을 확인한 뒤 수료증을 열 수 있습니다.

퀴즈 통과
피드백 제출
제출물 업로드

9-2. 수료증 발급 받기¶

조건을 충족했다면 수료증 열기 버튼으로 새 탭에서 수료증을 볼 수 있습니다.

수료증에는 일반적으로 다음 정보가 포함됩니다.

참석자 이름
코드랩 제목
완료 일시
검증용 URL / QR 코드

팝업 차단 해제

수료증은 새 탭으로 열리므로, 브라우저가 팝업을 막고 있다면 허용해야 할 수 있습니다.

9-3. 라이브 상태 보기¶

완료 화면에서 라이브 상태 페이지로 이동할 수 있는 버튼이 제공될 수 있습니다. 세션의 현재 상황이나 다른 참가자 진행 상태를 참고하는 용도로 사용됩니다.

10. 자주 겪는 문제와 해결 방법¶

페이지가 열리지 않아요¶

링크를 다시 확인하세요.
네트워크 연결을 확인하세요.
브라우저를 새로고침하세요.
회사/학교 네트워크에서 막히는 경우 다른 네트워크로 시도해보세요.

코드랩이 목록에 안 보여요¶

공개 코드랩이 아닐 수 있습니다.
URL이 잘못되었을 수 있습니다.
퍼실리테이터가 아직 세션을 열지 않았을 수 있습니다.

참가 등록이 안 돼요¶

닉네임이 이미 사용 중인지 확인하세요.
예전에 같은 이름으로 참가했다면 같은 고유 코드를 사용하세요.
코드랩이 비공개 상태인지 확인하세요.

진행 위치가 저장되지 않아요¶

다른 브라우저나 다른 기기를 쓰고 있지 않은지 확인하세요.
시크릿 모드가 아닌지 확인하세요.
브라우저 저장소 차단 설정이 없는지 확인하세요.

채팅 또는 DM이 안 돼요¶

네트워크가 불안정하면 연결이 늦을 수 있습니다.
새로고침 후 다시 시도해보세요.
진행자가 세션을 재시작한 경우 잠시 후 다시 연결될 수 있습니다.

화면 공유가 안 보여요¶

브라우저가 화면 공유를 지원하는지 확인하세요.
브라우저 권한 요청을 허용했는지 확인하세요.
보안 정책이 강한 사내 브라우저에서는 제한될 수 있습니다.

파일 업로드가 실패해요¶

파일 크기가 5MB를 넘지 않는지 확인하세요.
전체 제출 용량이 10MB를 넘지 않는지 확인하세요.
아이폰 사진이라면 HEIC 대신 JPG나 PNG로 변환해 업로드하세요.

Gemini 답변이 안 와요¶

API 키를 입력했는지 확인하세요.
잘못된 키가 저장되어 있으면 지우고 다시 입력하세요.
네트워크 문제로 응답이 늦을 수 있으니 잠시 기다려 보세요.

수료증이 안 열려요¶

퀴즈, 피드백, 제출물 조건을 모두 충족했는지 확인하세요.
팝업 차단을 해제하세요.
일부 배포 환경에서는 수료증 기능이 제공되지 않을 수 있습니다.

11. 참석자를 위한 빠른 체크리스트¶

시작 전¶

[ ] 브라우저와 네트워크 상태 확인
[ ] 실습 도구 설치 확인
[ ] 퍼실리테이터가 준 링크 열기
[ ] 닉네임과 고유 코드 기억하기

진행 중¶

[ ] 가이드 먼저 읽기
[ ] 단계별로 천천히 따라가기
[ ] 막히면 Help 요청 또는 채팅 사용하기
[ ] 필요한 자료 다운로드하기
[ ] 필요한 경우 인라인 댓글이나 화면 공유 활용하기

종료 전¶

[ ] 제출물이 필요한 세션인지 확인
[ ] 퀴즈와 피드백 완료
[ ] 수료증 열어보기

12. 추가 문서¶

잘 활용하는 팁

모르는 부분이 생기면 혼자 오래 막혀 있기보다, Help 요청 → 공개 채팅 → DM → 화면 공유 순서로 빠르게 도움을 받는 것이 가장 효율적입니다.