#코딩공부
“코딩공부” 태그 앱
사람들이 대화로 만든 “코딩공부” 태그 앱 30개를 둘러보세요. 마음에 드는 앱을 실행해 보고, 리믹스해 내 것으로 만드세요.
시간 복잡도
‘시간 복잡도’는 같은 번호를 가진 사람이 있는지 알아내는 문제를 통해 알고리즘의 효율을 체험하는 코딩 기초 학습 앱입니다. 모든 사람의 짝을 하나씩 비교하는 방법과 표를 한 번 만든 뒤 사람마다 확인하는 방법을 직접 실행하며, 사람 수가 늘어날 때 걸음 수가 어떻게 달라지는지 비교합니다.
참조와 복사
‘참조와 복사’는 자바스크립트의 값 복사, 객체 참조, 얕은 복사, 깊은 복사의 차이를 직접 실험하는 코딩 기초 학습 앱입니다. 숫자 변수와 색상·무늬가 있는 중첩 상자를 바꾸면서 한쪽의 수정이 다른 쪽에도 반영되는지 확인할 수 있습니다.
스택과 큐
‘스택과 큐’는 같은 데이터를 넣어도 자료구조에 따라 꺼내지는 순서가 달라지는 이유를 직접 실험하며 배우는 코딩 기초 학습 앱입니다. 스택의 후입선출과 큐의 선입선출을 각각 조작해 보고, 인쇄 대기열·되돌리기·놀이기구 줄·괄호 짝 맞추기 같은 실제 상황에 어떤 구조가 어울리는지 확인할 수 있습니다.
프롬프트 작성법
‘프롬프트 작성법’은 부탁하는 방식에 따라 AI의 답이 어떻게 달라지는지 직접 비교해 보는 AI 리터러시 학습 앱입니다. 누구에게 말할지, 무엇을 물을지, 어떻게 답하게 할지 세 조각을 조합해 무지개·화산·달에 대한 답을 만들어 봅니다.
AI 환각
‘AI 환각’은 AI가 자신 있게 말하더라도 자료에 근거가 있는지 직접 확인해야 한다는 점을 배우는 AI 리터러시 게임입니다. 펭귄 도감의 세 쪽 자료와 AI의 답변을 대조하며, 문장이 그대로 있는지, 지어낸 내용인지, 숫자만 달라진 비슷한 주장인지 판별합니다.
학습 데이터와 편향
‘학습 데이터와 편향’은 학습 예시가 AI의 답을 어떻게 바꾸는지 체험하는 AI 리터러시 학습 앱입니다. 고양이, 강아지, 토끼 그림 카드를 바구니에 넣거나 빼고 시험 그림을 골라 보면서, 데이터가 없거나 한쪽으로 치우쳤을 때 AI의 판단이 어떻게 달라지는지 확인할 수 있습니다.
다음 단어 예측
‘다음 단어 예측’은 언어 모델이 여러 확률 중에서 다음 단어를 고르는 방식을 체험하는 AI 리터러시 학습 앱입니다. 확률 막대에서 단어를 직접 골라 문장을 완성하고, 안전·보통·마구 손잡이를 바꿔 같은 시작 문장에서 결과가 어떻게 달라지는지 비교할 수 있습니다.
토큰화
토큰화는 언어 모델이 글을 통째로 읽는 대신 토큰이라는 토막으로 나누어 처리한다는 점을 체험하는 AI 리터러시 학습 앱입니다. 글자 사이를 직접 눌러 단어를 자르고 다시 붙여 보면서, 토큰 수가 글자 길이보다 말의 사용 빈도와 친숙함에 더 큰 영향을 받는다는 것을 배울 수 있습니다.
좌표와 충돌 판정
‘좌표와 충돌 판정’은 x와 y로 물체의 위치를 정하고 움직이는 방법을 배우는 코딩 기초 학습 앱입니다. x가 커지면 오른쪽으로, y가 커지면 아래쪽으로 이동한다는 좌표 규칙을 연습하고, 두 상자가 겹쳤는지 부등호로 판정하는 규칙도 직접 만들어 봅니다.
비동기 처리
‘비동기 처리’는 자바스크립트 코드가 작성된 순서와 실제 실행 순서가 달라질 수 있는 이유를 체험하는 코딩 기초 학습 앱입니다. 각 줄을 즉시 실행하거나 몇 초 뒤 실행하도록 정하고, 결과 순서를 예측하며, 반복 실행의 간격과 멈추는 시점을 직접 바꿔 볼 수 있습니다.
이진 탐색
‘이진 탐색’은 목록에서 원하는 항목을 찾는 세 가지 방법을 비교해 보는 코딩 기초 학습 앱입니다. 하나씩 훑는 순차 탐색, 정렬된 목록을 반씩 줄이는 이진 탐색, 이름표를 이용해 바로 찾는 방법을 단계별 미션으로 체험할 수 있습니다.
재귀 함수
재귀 함수는 함수가 자기 자신을 호출하는 과정을 시각적으로 따라가며 배우는 코딩 학습 앱입니다. 인형 속 인형을 여는 단계, 호출 스택이 되돌아오며 값을 만드는 과정, 깊이와 각도로 가지 나무를 완성하는 활동을 통해 재귀 호출과 멈춤 조건의 중요성을 익힐 수 있습니다.
JSON
JSON은 자바스크립트식 값을 JSON 글자로 바꾸고, JSON 글자를 읽고, 값을 보내고 받는 과정을 익히는 코딩 기초 학습 앱입니다. 세 개의 탭에서 예시 상자의 값을 직접 바꾸며 따옴표와 쉼표, 배열, 함수, undefined가 결과에 어떤 영향을 주는지 바로 확인할 수 있습니다.
정렬 알고리즘
정렬 알고리즘은 이웃한 막대를 바꾸며 값을 정렬하는 과정을 체험하는 코딩 학습 앱입니다. 네 가지 손으로 정렬하기 미션을 수행하고, 컴퓨터가 이웃한 값을 반복해서 비교하고 교환하는 과정을 단계별 또는 자동으로 관찰할 수 있습니다.
이진수
‘이진수’는 0과 1로 컴퓨터가 수와 글자를 표현하는 방법을 체험하며 배우는 코딩 기초 학습 앱입니다. 8개의 전구형 비트 칸을 켜고 끄며 목표 숫자를 만들고, 비트에 숨은 메시지를 해독하며, 비트를 왼쪽이나 오른쪽으로 밀어 값이 두 배 또는 절반이 되는 원리를 연습할 수 있습니다.
문자열 다루기
‘문자열 다루기’는 자바스크립트에서 글자가 어떻게 동작하는지 인터랙티브하게 익히는 코딩 기초 학습 앱입니다. 글자 번호가 0부터 시작한다는 점과 slice()의 시작·끝 범위를 직접 선택하며 배우고, +가 숫자를 더할 때와 문자열을 이어 붙일 때의 차이도 확인할 수 있습니다.
객체
객체는 여러 값을 이름이 붙은 속성으로 묶어 저장하는 자바스크립트 개념을 인터랙티브하게 익히는 교육 앱이에요. 이름과 번호로 속성에 접근해 값을 바꿔 보고, hero.bag.gold 같은 중첩 객체 경로를 따라가며 값을 꺼내는 연습을 할 수 있어요.
논리 연산자
‘논리 연산자’는 자바스크립트 불리언 조건을 함께 사용하는 방법을 익히는 코딩 기초 학습 앱입니다. 스위치와 전구 회로로 &&, ||, !의 결과를 실험하고, 입장 규칙 퍼즐과 진리표, 논리식 뒤집기 미션을 통해 조건 결합과 드모르간 법칙을 연습할 수 있어요.
반복문으로 도형 그리기
‘반복문으로 도형 그리기’는 거북이가 명령을 따라 움직이며 SVG 화면에 선과 도형을 그려 보는 코딩 기초 학습 앱입니다. 명령을 직접 쌓아 실행하고, 반복 횟수와 회전 각도를 선택해 목표 도형을 완성할 수 있습니다.
함수와 매개변수
‘함수와 매개변수’는 반복되는 코드를 함수로 묶는 방법과 매개변수로 값을 전달하는 방법, return으로 결과를 돌려주는 방법을 체험하는 자바스크립트 기초 학습 앱입니다. 세 가지 탭에서 코드를 직접 누르거나 빈 줄에 들어갈 코드를 골라 실행하며 결과를 확인할 수 있습니다.
입력 이벤트
‘입력 이벤트’는 자바스크립트의 input과 change 이벤트가 언제 반응하는지 비교해 보는 코딩 학습 앱입니다. 입력 상자에 글자를 입력하고 반응 시점과 바뀌는 대상을 선택한 뒤, 간단한 코드를 읽으며 목표 결과를 맞혀 볼 수 있습니다.
배열
배열은 여러 값을 저장하는 자바스크립트 배열과 0번부터 시작하는 인덱스를 시각적으로 익히는 코딩 기초 학습 앱입니다. push, pop, unshift, shift를 직접 눌러 보며 값을 앞이나 뒤에 넣고 뺄 때 상자와 번호가 어떻게 바뀌는지 확인할 수 있습니다.
클릭 이벤트
‘클릭 이벤트’는 자바스크립트의 버튼 이벤트와 변수를 체험하며 배우는 코딩 기초 학습 앱입니다. 언제 이벤트가 실행되고 무엇이 바뀌는지 선택한 뒤 버튼을 눌러 규칙의 결과를 확인할 수 있습니다.
조건문
조건문은 if, else if, else 규칙이 상황에 따라 결정을 바꾸는 방식을 배우는 코딩 기초 학습 앱입니다. 학습자는 갈림길의 로봇이 문 색이나 숫자를 보고 올바른 길을 고르도록 규칙을 만들고, 여러 지도에서 같은 규칙이 통하는지 확인할 수 있습니다.
디버깅
디버깅은 초보자를 위한 자바스크립트 버그 찾기 학습 게임입니다. 기댓값과 현재 출력값을 비교하고, 코드 줄을 눌러 문제가 있는 줄을 찾은 뒤 올바른 수정 방법을 골라 결과를 확인합니다.
오늘의 코드 퀴즈
오늘의 코드 퀴즈는 짧은 자바스크립트 코드를 읽고 실행 결과를 맞히는 초보자용 학습 게임입니다. 매일 제공되는 3개의 문제를 풀고, 무한 연습 탭에서 대입·문자열·반복문·조건문·배열·함수·증감 등 원하는 유형을 계속 연습할 수 있습니다. 힌트 노트에는 문제에 등장하는 핵심 규칙과 예시가 정리되어 있습니다.
CSS 스타일
CSS 스타일은 CSS 속성이 글자와 박스 레이아웃을 어떻게 바꾸는지 직접 확인하는 코딩 기초 학습 앱입니다. 글자색, 배경색, 글자 크기, 굵기, 정렬과 함께 padding, border, margin, border-radius를 조작하면 CSS 코드와 미리보기가 함께 바뀝니다.
HTML 태그
HTML 태그는 HTML 태그가 글자와 페이지 구조를 어떻게 바꾸는지 배우는 초급 코딩 학습 앱입니다. 단어를 골라 꾸미기 태그를 씌우고, 여러 블록을 쌓아 간단한 페이지를 만들며, 코드만 보고 화면을 맞히는 퀴즈를 풀 수 있습니다.
변수와 함수
‘변수와 함수’는 변수를 이름표가 붙은 상자로, 함수를 값을 규칙에 따라 바꾸는 기계로 익히는 코딩 기초 학습 앱입니다. 변수 상자에서 숫자를 저장하고 덮어쓰기, 1 늘리기, 복사, 교환을 직접 해 볼 수 있으며, 함수 기계에서는 보이는 규칙을 적용하거나 입출력 결과를 보고 비밀 규칙을 맞힐 수 있습니다.
순차와 반복
‘순차와 반복’은 코딩 입문자를 위한 로봇 퍼즐 학습 앱입니다. 앞으로 이동과 좌우 회전 명령 블록을 순서대로 배치해 벽을 피해 로봇을 별까지 보내고, 반복 상자에 명령을 담아 여러 번 실행할 수 있습니다. 탐구, 연습, 반복의 세 영역을 통해 순차, 반복, 디버깅의 기초를 직접 익힐 수 있습니다.
아이디어가 있나요? 말로 설명하면 Collabby가 실행·공유할 수 있는 웹앱을 만들어 줍니다.
내 앱 만들기