#코딩
“코딩” 태그 앱
사람들이 대화로 만든 “코딩” 태그 앱 25개를 둘러보세요. 마음에 드는 앱을 실행해 보고, 리믹스해 내 것으로 만드세요.
시간 복잡도
시간 복잡도는 같은 번호를 가진 사람이 있는지 찾는 문제를 통해 알고리즘의 효율을 배우는 인터랙티브 코딩 기초 학습 앱입니다. 모든 사람의 짝을 비교하는 방법과 표를 한 번 만들어 조회하는 방법의 걸음 수를 비교하고, 사람 수를 열 배로 늘렸을 때 작업량이 어떻게 달라지는지 보여 줍니다.
참조와 복사
「참조와 복사」는 자바스크립트의 값 복사, 객체 참조, 얕은 복사, 깊은 복사의 차이를 직접 실행하며 배우는 인터랙티브 학습 앱입니다. 숫자와 글자, 상자와 이름표 예시를 버튼으로 바꾸면서 원본과 사본이 함께 변하는지 즉시 확인할 수 있습니다.
스택과 큐
‘스택과 큐’는 같은 항목을 넣어도 자료구조에 따라 꺼내지는 순서가 어떻게 달라지는지 체험하는 코딩 기초 학습 앱입니다. 스택에서는 마지막에 넣은 것이 먼저 나오는 LIFO를, 큐에서는 먼저 넣은 것이 먼저 나오는 FIFO를 직접 조작하며 배울 수 있습니다.
좌표와 충돌 판정
‘좌표와 충돌 판정’은 x와 y로 화면 위 물체의 위치를 정하고 움직이는 방법을 배우는 코딩 기초 학습 앱입니다. x가 커지면 오른쪽으로, y가 커지면 아래로 이동하는 화면 좌표계를 직접 조작하며 익힐 수 있습니다.
비동기 처리
비동기 처리는 자바스크립트 코드가 적힌 순서와 다르게 실행될 수 있는 이유를 체험으로 배우는 코딩 기초 학습 앱입니다. 각 동작을 지금 실행할지 지연할지 정하고, 실제로 나타나는 순서를 확인할 수 있습니다. 반복 실행 탭에서는 간격과 멈출 횟수를 설정하거나 멈춤 조건이 없을 때 계속 실행되는 상황도 살펴봅니다.
이진 탐색
이진 탐색은 목록에서 원하는 항목을 찾는 세 가지 방법을 비교하며 배우는 코딩 기초 학습 앱입니다. 항목을 하나씩 훑는 순차 탐색, 정렬된 목록을 반씩 줄이는 이진 탐색, 이름표를 이용해 바로 찾는 방법을 단계별 도전 과제로 체험할 수 있습니다.
재귀 함수
재귀 함수는 함수가 자기 자신을 호출하는 원리를 단계별로 익히는 인터랙티브 코딩 학습 앱입니다. ‘인형 속 인형’에서는 멈춤 조건과 호출 횟수를 확인하고, ‘차곡차곡’에서는 호출 스택이 돌아오며 값을 만드는 과정을 살펴봅니다.
JSON
JSON은 자바스크립트와 비슷한 객체를 JSON 글자로 바꾸고, 다시 객체로 읽는 과정을 연습하는 코딩 기초 학습 앱입니다. 세 가지 탭에서 문자열과 이름표의 따옴표, 쉼표, 배열 규칙을 단계별 문제로 익힐 수 있습니다.
정렬 알고리즘
‘정렬 알고리즘’은 이웃한 막대를 바꾸며 오름차순 정렬의 원리를 배우는 코딩 기초 학습 앱입니다. 손으로 직접 막대를 교환하고, 컴퓨터처럼 이웃한 값을 비교·교환하는 과정을 한 단계씩 또는 자동으로 관찰할 수 있습니다.
이진수
‘이진수’는 컴퓨터가 0과 1로 숫자와 글자를 표현하는 방법을 익히는 초급 코딩 학습 앱입니다. 전구 8칸의 자리값을 조합해 숫자를 만들고, 비트로 숨겨진 단어를 읽으며, 비트를 한 칸씩 밀어 수를 두 배 또는 절반으로 바꾸는 세 가지 활동을 제공합니다.
문자열 다루기
‘문자열 다루기’는 자바스크립트 문자열의 기본 개념을 직접 눌러 보며 배우는 인터랙티브 학습 앱입니다. 0부터 시작하는 글자 번호와 slice()의 끝 번호 규칙을 익히고, +가 숫자를 더할 때와 글자를 이어 붙일 때의 차이를 확인할 수 있습니다.
객체
객체는 자바스크립트 객체를 처음 배우는 사람을 위한 인터랙티브 학습 앱이에요. 여러 값을 이름이 붙은 속성으로 묶고, 이름으로 접근하는 방식과 번호로 접근하는 방식을 비교해 볼 수 있어요. 중첩 객체에서 값을 차례로 꺼내고, for 반복문과 조건으로 카드 목록을 골라내는 연습도 제공합니다.
논리 연산자
논리 연산자는 자바스크립트의 불리언 조건을 연결하는 방법을 인터랙티브하게 익히는 코딩 기초 학습 앱입니다. 스위치와 전구 회로에서 &&, ||, !의 동작을 확인하고, 손님 입장 규칙을 만들며, 진리표로 서로 같은 논리식을 찾아볼 수 있습니다.
반복문으로 도형 그리기
‘반복문으로 도형 그리기’는 거북이 그래픽으로 반복문과 각도의 원리를 익히는 코딩 기초 학습 앱입니다. 명령을 쌓아 거북이를 움직이고 실행 결과를 확인한 뒤, 반복 횟수와 회전 각도를 선택해 정사각형·정삼각형·정육각형·정오각형·별을 목표 그림과 맞춰 봅니다.
함수와 매개변수
‘함수와 매개변수’는 자바스크립트 초보자를 위한 인터랙티브 코딩 학습 앱이에요. 세 개의 탭에서 반복되는 작업을 함수로 묶는 방법, 괄호로 값을 받는 매개변수, return으로 결과를 돌려주는 방법을 단계별 미션으로 익힐 수 있어요.
입력 이벤트
‘입력 이벤트’는 자바스크립트의 input과 change 이벤트가 글자 입력에 어떻게 반응하는지 직접 비교해 보는 코딩 기초 학습 앱입니다. 입력 상자에 글자를 입력하며 반응 시점과 화면에서 바뀌는 대상을 선택하고, 코드 읽기 문제와 입력 검사 규칙 만들기까지 단계적으로 연습할 수 있습니다.
배열
배열은 자바스크립트 배열의 번호가 어떻게 바뀌는지 상자 시각화로 익히는 코딩 기초 학습 앱입니다. push, pop, unshift, shift를 직접 눌러 값을 넣고 빼면서 0번부터 시작하는 인덱스와 앞뒤 삽입·삭제의 차이를 알아볼 수 있습니다. 반복문으로 배열을 하나씩 훑는 문제와 목표 배열 만들기 퍼즐도 제공합니다.
클릭 이벤트
‘클릭 이벤트’는 자바스크립트의 클릭 이벤트를 직접 눌러 보며 배우는 코딩 기초 학습 앱입니다. 언제 어떤 동작이 일어날지와 무엇이 바뀔지를 고른 뒤 화면의 버튼을 눌러 규칙이 실행되는 과정을 확인할 수 있습니다. 이벤트 처리, 값을 기억하는 변수, 조건식, 버튼별 동작 연결을 세 가지 단계형 활동으로 익힙니다.
조건문
조건문은 갈림길에 선 로봇에게 만약~아니면 규칙을 정해 길을 고르게 하며 조건문의 기초를 익히는 인터랙티브 코딩 학습 앱입니다. 문 색에 따라 길을 선택하는 활동부터 여러 지도에 같은 규칙을 적용하는 퍼즐, 키·나이·기온·홀짝·점수에 따라 손님을 안내하는 규칙 만들기까지 세 가지 활동으로 구성되어 있습니다.
디버깅
디버깅은 기댓값과 현재 출력되는 실제 값을 비교하며 자바스크립트 코드의 버그를 찾아 고치는 초보자용 인터랙티브 퍼즐 앱입니다. 사냥 코스에서는 문제가 있는 줄을 고르고 올바른 수정 방법을 선택한 뒤 코드를 다시 실행합니다.
오늘의 코드 퀴즈
오늘의 코드 퀴즈는 짧은 자바스크립트 코드를 읽고 실행 결과를 예측해 보는 초급 코딩 퀴즈 앱입니다. 오늘의 문제를 풀거나 무한 연습에서 대입, 문자열, 반복문, 조건문, 배열, 함수, 증감 등 원하는 유형을 골라 계속 연습할 수 있습니다. 힌트 노트에서는 문제에 사용된 코드 읽기 규칙을 설명합니다.
CSS 스타일
CSS 스타일은 CSS 속성이 화면의 글자와 상자를 어떻게 바꾸는지 직접 확인하는 코딩 기초 학습 앱입니다. 글자색, 배경색, 글자 크기, 굵기와 정렬을 바꾸면서 생성되는 CSS 코드와 미리보기를 함께 볼 수 있습니다.
HTML 태그
HTML 태그는 HTML 태그가 글자와 페이지 구조를 어떻게 바꾸는지 체험하며 배우는 코딩 기초 학습 앱입니다. 단어를 고른 뒤 굵게, 기울임, 밑줄, 형광펜, 취소선, 코드체 등의 태그를 적용하고 HTML 코드와 결과 화면을 나란히 확인할 수 있습니다.
변수와 함수
‘변수와 함수’는 변수에 값을 저장하는 방법과 함수가 규칙에 따라 값을 바꾸는 과정을 퍼즐로 배우는 코딩 기초 학습 앱입니다. 변수 상자 a와 b에 숫자를 담고 덮어쓰기·복사·교환을 직접 실험할 수 있으며, 함수의 규칙을 확인하거나 입출력 표를 보고 비밀 규칙을 맞힐 수 있습니다.
순차와 반복
‘순차와 반복’은 코딩 초보자를 위한 인터랙티브 로봇 퍼즐 게임입니다. 앞으로 이동과 좌우 회전 명령 블록을 순서대로 배치해 벽을 피해 로봇을 별까지 보내고, 반복 상자에 명령을 담아 여러 번 실행할 수 있습니다.
아이디어가 있나요? 말로 설명하면 Collabby가 실행·공유할 수 있는 웹앱을 만들어 줍니다.
내 앱 만들기