#코딩앱만들기
“코딩앱만들기” 태그 앱
사람들이 대화로 만든 “코딩앱만들기” 태그 앱 30개를 둘러보세요. 마음에 드는 앱을 실행해 보고, 리믹스해 내 것으로 만드세요.
열 배가 되면
‘열 배가 되면’은 같은 번호를 가진 사람이 있는지 찾는 두 가지 방법을 비교하며 알고리즘 효율을 배우는 인터랙티브 코딩·컴퓨터과학 학습 앱입니다. 모든 사람의 짝을 비교하는 방법은 사람 × (사람−1) ÷ 2번의 걸음이 필요하고, 표를 만드는 방법은 준비 20걸음 뒤 사람마다 한 걸음이 듭니다.
같은 상자를 가리킨다
「같은 상자를 가리킨다」는 값, 참조, 객체, 복사의 차이를 직접 조작하며 배우는 코딩 기초 학습 앱입니다. 숫자와 글자는 이름표마다 별도의 값으로 복사되지만, 두 이름표가 같은 상자를 가리키면 어느 쪽을 바꿔도 같은 객체가 변하는 모습을 보여 줍니다.
넣은 순서, 나오는 순서
「넣은 순서, 나오는 순서」는 스택과 큐의 차이를 직접 조작하며 배우는 코딩 기초 학습 앱입니다. 숫자를 넣고 꺼내 보면서 스택의 후입선출과 큐의 선입선출 동작을 확인하고, 특정 출력 순서를 만들 수 있는지 도전할 수 있습니다.
말을 바꾸면 답이 바뀌어요
AI에게 하는 부탁이 누구에게, 무엇을, 어떻게의 세 조각으로 이루어지며, 각 조각을 바꾸면 답도 달라진다는 점을 체험하는 AI 리터러시 교육 앱입니다. 무지개·화산·달을 주제로 듣는 사람과 답변 형식을 바꿔 보고, 빈칸을 남겼을 때 AI가 정하는 부분을 주황색으로 확인할 수 있습니다.
그럴듯한 거짓말
AI가 자신 있게 말한다고 해서 항상 맞는 것은 아니라는 점을 배우는 AI 리터러시 교육 앱입니다. 세 개의 탭에서 펭귄 도감의 세 페이지를 펼쳐 AI의 주장에 실제 근거가 있는지 확인하고, 서로 다른 자신감 수치가 붙은 답변을 비교하며 믿어도 되는지 판정합니다.
배운 것만 알아요
‘배운 것만 알아요’는 학습 데이터가 AI의 답에 어떤 영향을 주는지 체험하는 AI 리터러시 교육 앱입니다. 세 개의 탭에서 고양이·강아지·토끼 그림 카드를 바구니에 넣어 AI를 가르치고, 치우친 데이터를 더하거나 빼서 고치며, AI가 틀린 까닭을 바구니 속 데이터에서 찾아봅니다.
다음 말을 고를 뿐
언어 모델이 답을 알고 말하는 것이 아니라, 다음에 올 말을 확률에 따라 고른다는 원리를 직접 체험하는 AI 리터러시 앱입니다. 세 가지 활동에서 확률이 높은 말과 낮은 말을 골라 문장을 만들고, 안전·보통·마구 손잡이에 따라 결과가 어떻게 달라지는지 비교할 수 있습니다.
글자를 토막 내요
‘글자를 토막 내요’는 AI가 글을 읽는 방식인 토큰화를 놀이처럼 익히는 AI 리터러시 학습 앱입니다. 세 가지 탭에서 글자 사이를 눌러 AI처럼 단어를 나누고, 글자 수와 토막 수를 비교하며, 토막 수를 먼저 예상해 볼 수 있습니다.
부딪혔다!
‘부딪혔다!’는 좌표와 충돌 판정을 게임 방식으로 익히는 코딩 기초 학습 앱입니다. x와 y로 상자의 위치를 정하고, 매 걸음마다 값을 더하거나 빼며 네 방향으로 움직여 봅니다. 마지막에는 네 방향의 부등호 규칙을 직접 만들어 두 상자가 겹치는지 여러 배치에서 시험합니다.
기다렸다 하기
‘기다렸다 하기’는 자바스크립트의 비동기 실행과 예약 실행을 체험하는 코딩 기초 학습 앱입니다. 시간 눈금과 실제 출력 순서를 비교하며, 코드를 적은 순서와 실행되는 순서가 달라질 수 있고 0초 예약도 아래 줄보다 늦게 실행될 수 있음을 배웁니다.
어디 숨었을까
‘어디 숨었을까’는 목록에서 원하는 항목을 찾는 세 가지 방법을 체험하며 배우는 코딩 기초 교육 앱입니다. 하나씩 훑기, 정렬된 목록을 반씩 줄이는 이진 탐색 방식, 이름표를 이용한 직접 찾기를 단계별 문제로 비교할 수 있습니다.
나를 다시 부르기
《나를 다시 부르기》는 함수가 자기 자신을 호출하는 재귀를 초보자도 단계적으로 배울 수 있는 인터랙티브 코딩 학습 앱입니다. 인형 속 인형에서 멈춤 조건과 호출 순서를 살펴보고, 차곡차곡에서는 재귀 호출이 돌아오며 덧셈과 곱셈 결과를 만드는 과정을 확인할 수 있습니다.
상자를 글자로
‘상자를 글자로’는 자바스크립트 객체를 JSON 글자로 바꾸고, JSON을 다시 값으로 읽는 과정을 배우는 코딩 기초 학습 앱입니다. 세 가지 탭에서 값을 직접 바꾸며 문자열과 숫자의 따옴표 차이, JSON 이름표의 규칙, 쉼표 오류를 단계별로 확인할 수 있습니다.
작은 것부터
‘작은 것부터’는 숫자와 객체를 정렬하는 방법을 체험하는 코딩 학습 앱입니다. 막대를 바로 옆 항목과만 바꾸며 직접 정렬하고, 컴퓨터가 이웃한 두 항목을 비교하고 필요할 때 교환하는 과정을 한 걸음씩 확인할 수 있습니다.
0과 1로 세기
‘0과 1로 세기’는 이진수와 비트, 컴퓨터가 숫자와 글자를 표현하는 방식을 직접 퍼즐로 익히는 코딩 기초 학습 앱입니다. ‘전구와 수’에서 8칸의 비트를 켜고 꺼 목표 숫자를 만들고, ‘비밀 메시지’에서 비트 줄을 숫자와 글자로 바꾸며, ‘한 칸 밀기’에서 비트 시프트로 수를 두 배 또는 절반으로 바꿉니다.
자르고 붙이고
‘자르고 붙이고’는 자바스크립트 문자열 기초를 인터랙티브하게 익히는 코딩 교육 앱입니다. 글자에 0부터 번호를 매겨 slice()의 시작·끝 번호와 끝 번호가 포함되지 않는 규칙을 연습하고, +가 숫자를 더할 때와 글자를 이어 붙일 때 어떻게 달라지는지 살펴봅니다.
이름표 붙은 상자
‘이름표 붙은 상자’는 자바스크립트 객체, 배열, 중첩 객체, 반복문을 직접 눌러 보며 배우는 코딩 기초 학습 앱입니다. hero.hp처럼 이름으로 값을 찾는 방식과 hero[1]처럼 번호로 찾는 방식을 비교하고, 상자 안의 상자에서 값을 꺼내며, for 반복문으로 카드 목록을 조건에 따라 골라낼 수 있습니다.
그리고 · 또는 · 아니면
「그리고 · 또는 · 아니면」은 자바스크립트의 불리언 논리와 조건 결합을 인터랙티브하게 배우는 코딩 기초 앱입니다. 스위치와 전구 회로에서 &&, ||, !의 동작을 확인하고, 놀이공원 입장 규칙을 직접 만들어 조건을 연습할 수 있습니다.
코드로 그림 그리기
‘코드로 그림 그리기’는 거북이에게 이동 명령을 쌓아 경로와 도형을 그려 보는 코딩 학습 앱입니다. forward·right·left 명령으로 거북이를 움직이고, 반복 횟수와 회전 각도를 조절해 정삼각형·정사각형·정오각형·정육각형·별을 완성할 수 있습니다.
나만의 함수 만들기
‘나만의 함수 만들기’는 자바스크립트 함수의 기초를 세 가지 체험형 활동으로 배우는 코딩 학습 앱입니다. 반복되는 코드를 함수로 묶었을 때 수정 횟수가 어떻게 달라지는지 비교하고, 괄호로 값을 받는 매개변수와 return으로 값을 돌려주는 방법을 연습할 수 있습니다.
글자를 치면
‘글자를 치면’은 텍스트 입력과 자바스크립트 이벤트를 체험하며 배우는 코딩 기초 학습 앱입니다. 입력 상자에 글자를 입력하면서 글자 수, 색상, 대문자 변환, 기호 추가, 값의 두 배 계산처럼 화면이 바뀌는 모습을 확인할 수 있습니다.
상자 줄 세우기
상자 줄 세우기는 자바스크립트 배열의 기본 연산과 반복문을 상자와 번호로 시각적으로 익히는 코딩 학습 앱입니다. push·pop·unshift·shift를 사용해 배열의 앞과 뒤에 값을 넣고 빼면서 0번부터 시작하는 인덱스와 번호의 이동을 확인할 수 있습니다.
버튼을 누르면
「버튼을 누르면」은 자바스크립트 이벤트, 변수, 버튼 동작을 직접 실험하며 배우는 코딩 기초 학습 앱입니다. 언제 버튼을 눌렀을 때 무엇이 바뀌는지 규칙을 고르고, 실제 버튼을 눌러 코드의 결과를 확인할 수 있습니다.
조건 갈림길
‘조건 갈림길’은 갈림길에 선 로봇이 조건에 따라 스스로 길을 고르는 과정을 통해 조건문을 배우는 코딩 기초 학습 앱입니다. 문 색과 숫자 같은 값을 기준으로 만약·이면·아니면 규칙을 만들고, 로봇이 별에 도착하는지 직접 실행해 볼 수 있습니다.
버그 사냥꾼
버그 사냥꾼은 코딩 초보자를 위한 인터랙티브 자바스크립트 디버깅 퍼즐 앱입니다. 나와야 하는 값과 현재 나오는 값을 비교하고, 버그가 있는 줄을 누른 뒤 고치는 방법을 선택해 수정된 코드의 실행 결과를 확인할 수 있습니다.
오늘의 코드 퀴즈
오늘의 코드 퀴즈는 짧은 자바스크립트 코드를 읽고 실행 결과를 맞히는 초보자용 학습 게임입니다. 매일 제공되는 3개의 문제를 풀고, 무한 연습 탭에서 대입·문자열·반복문·조건문·배열·함수·증감 등 원하는 유형을 계속 연습할 수 있습니다. 힌트 노트에는 문제에 등장하는 핵심 규칙과 예시가 정리되어 있습니다.
CSS 꾸미기 실험실
CSS 꾸미기 실험실은 CSS가 웹 화면을 어떻게 바꾸는지 직접 확인하며 배우는 초급 학습 앱입니다. ‘색과 글자’ 탭에서 글자색, 배경색, 글자 크기, 굵기, 정렬 버튼을 누르면 CSS 코드가 추가되고 미리보기가 즉시 바뀝니다.
HTML 태그 놀이터
HTML 태그 놀이터는 HTML 태그의 기본 개념을 시각적으로 익히는 초보자용 인터랙티브 학습 앱입니다. 단어를 고른 뒤 굵게, 기울임, 밑줄, 형광펜, 취소선, 코드체 태그를 적용하고 HTML 코드와 결과 화면의 변화를 함께 확인할 수 있습니다.
변수 상자와 함수 기계
‘변수 상자와 함수 기계’는 변수와 함수의 기본 개념을 놀이처럼 익히는 코딩 기초 학습 앱입니다. 이름이 붙은 상자 a와 b에 숫자를 저장하고, 덮어쓰기·1 더하기·복사·교환을 직접 해볼 수 있습니다.
로봇 명령 퍼즐
로봇 명령 퍼즐은 순차, 디버깅, 반복의 기초를 익히는 인터랙티브 코딩 학습 앱입니다. 앞으로 이동, 왼쪽 돌기, 오른쪽 돌기 명령 블록을 순서대로 배치한 뒤 실행해 로봇을 벽 너머 별까지 안내합니다. 자유 탐구 모드와 일반 퍼즐 5개, 명령을 2~5회 반복할 수 있는 반복 상자 퍼즐 3개를 제공합니다.
아이디어가 있나요? 말로 설명하면 Collabby가 실행·공유할 수 있는 웹앱을 만들어 줍니다.
내 앱 만들기