스티브코딩

블록과 픽셀아트

블록 설치 방식, 픽셀아트 수업 흐름·기록, 10색상환 색 표현, 도트 아트 응용

활동2026-10-20 갱신

블록 다루기: 설치 방식에 따라 세 가지

  • 떨어지는 블록: 아래가 비어 있으면 떨어짐 — 모래, 콘크리트 가루
  • 반 칸 블록: 겨냥한 위치에 따라 반 칸 위·아래에 설치 — 석재 판
  • 방향 블록: 바라보는 방향에 따라 다르게 놓임 — 석재 계단
  • 빠르게 놓기: 오른쪽 버튼을 연달아 누르지 말고 누른 채로 이동
  • 계단 지붕 팁: 계단 옆면을 기준으로 이어 놓으면 연결됨, 받침 블록을 놓고 설치한 뒤 제거
  • 베드락 자료(S61)의 ‘콘크리트 블록이 떨어진다’는 오류이고, 떨어지는 것은 콘크리트 가루입니다(자바 자료 S58에서 수정).
계단: 바라보는 방향에 따라 다르게 놓임
계단: 바라보는 방향에 따라 다르게 놓임
판: 겨냥한 위치(위·아래)에 따라 다르게 놓임
판: 겨냥한 위치(위·아래)에 따라 다르게 놓임

픽셀아트 수업 흐름: 종이 도안에서 블록 작품까지

  1. 픽셀 개념(교실): 이미지를 이루는 가장 작은 점, 쇠라의 점묘화와 비교
  2. 도안 그리기(교실): 10×10 · 20×15 격자에 색연필로 먼저 계획
  3. 블록으로 옮기기(컴퓨터실): 20×20 구역이 나뉜 월드에서 자기 구역에만 제작
  4. 기록·공유(컴퓨터실): 카메라로 찍고 포트폴리오에 이름 적어 jpg로 내보내기
▶ 영상: 마크 1교시_픽셀아트 만들기
▶ 영상: 마크 1교시_픽셀아트 만들기
세워서 만들면 작품을 한꺼번에 감상
세워서 만들면 작품을 한꺼번에 감상
아이템 창 검색으로 색 블록 찾기
아이템 창 검색으로 색 블록 찾기
  • 교실(개념·도안) → 컴퓨터실(제작) 2단계로 나누면 컴퓨터실에서 헤매는 시간이 줄어듭니다(2차시: 교실 40분 + 컴퓨터실 40분).
교사용 메모 · 픽셀아트 수업 메모
  • 픽셀(화소)은 이미지를 이루는 가장 작은 점, 쇠라의 점묘화와 같은 원리로 소개합니다.
  • 도안: 10×10, 20×15 빈 격자에 색연필로 먼저 그립니다. Coloring Squared 도안은 덧셈·곱셈 답의 색을 칠하면 그림(아이언 골렘, 크리퍼 등)이 나와 수학과 잇기 좋습니다.
  • 아무 데서나 만들면 서로 침범하므로 20×20 구역이 나뉜 월드를 씁니다(영상 설명란 월드).
  • 결과물: 카메라로 찍고 포트폴리오에서 이름을 적은 뒤 내보내기로 jpg 저장.
  • 보강(꾸그 「픽셀아트 건축 대결」 도입): 픽셀은 모니터가 나타내는 가장 작은 점입니다. 확대하면 빨강·초록·파랑의 작은 불이 보이고, 컴퓨터가 1과 0 신호로 이 불을 켜고(1) 꺼서(0) 그림을 보여 줍니다. 이어서 생활 속 픽셀아트(초콜릿, 포스트잇을 붙인 그림, 레고, 색연필을 모아 만든 그림)를 보여 주면 “블록 하나가 픽셀 하나”라는 생각으로 자연스럽게 넘어갑니다. 원본의 감상 사진은 외부 블로그 출처라 넣지 않았습니다.

교실 활동: 픽셀 이해와 도안 그리기

  • 픽셀 보기: 모니터를 돋보기로 크게 보면 칸(픽셀) 하나하나가 보입니다. 쇠라의 점묘화와 같은 원리입니다.
  • 도안: 10×10, 20×15 칸 모눈 도안을 인쇄해 색연필로 먼저 그립니다.
  • 무엇을 그릴지 막막한 학생에게는 ‘픽셀아트’ 이미지 검색 결과를 보여 주거나 출력해 줍니다(잘 만드는 학생에게는 참고 도안을 주지 않아도 좋음).
  • 수학 연계: Coloring Squared(www.coloringsquared.com)의 도안은 칸마다 덧셈·곱셈 문제가 있어, 답에 맞는 색을 칠하면 아이언 골렘·크리퍼 같은 캐릭터가 나옵니다.
① 빈 모눈 도안 (02:07)
① 빈 모눈 도안 (02:07)
② 곱셈 색칠 도안 ‘Creeper - Close Up’ (03:20)
② 곱셈 색칠 도안 ‘Creeper - Close Up’ (03:20)

[활동 안내] 픽셀아트: 블록 고르기와 작업 약속

  • 이런 블록을 써요: 양털 · 콘크리트(16가지 색, 가장 많이 쓰는 기본 블록) / 테라코타(차분한 색, 피부·흙 표현에 좋음) / 색유리(투명한 느낌이 필요할 때)
  • 이런 블록은 피해요: 모래 · 콘크리트 가루(아래가 비면 떨어져서 세워 만들 수 없음) / 얼음(깨지면 물이 나와 주변 작품이 망가짐)
  1. 핫바 채우기: 자주 쓸 색 블록을 핫바에 미리 넣기
  2. 내 구역에서만: 친구 구역의 블록은 건드리지 않기
  3. 카메라로 남기기: 사진 찍고 포트폴리오에 이름 쓰기
  • 감상: 작품을 바닥에 눕히지 않고 세워서 만들면 친구 작품까지 한눈에 볼 수 있어요
  • 얼음을 쓰면 안 되는 이유: 투명한 느낌을 내려고 얼음을 쓰는 학생이 많은데, 잘못 놓아 깨면 물이 나와 주변 작품이 물바다가 됩니다. 물이 생기면 얼음이 있던 칸을 블록으로 채우면 사라집니다(영상 6:20~).

컴퓨터실: 구역 정해 주기와 블록 주의

  • 픽셀아트 맵을 불러온 뒤 학생마다 번호 구역을 정해 줍니다. 벽이 없어도 자기 구역 안에서 만듭니다.
  • 인벤토리(E)에서 스테인드글라스·양털·콘크리트·테라코타를 주로 씁니다.
  • 콘크리트 가루·(붉은) 모래는 받침이 없으면 떨어지고, 얼음은 깨지면 물이 나오므로 미리 안내합니다.
번호 구역으로 나뉜 픽셀아트 맵: 학생마다 영역 지정 (04:10)
번호 구역으로 나뉜 픽셀아트 맵: 학생마다 영역 지정 (04:10)
얼음을 깨면 물이 생김 (06:48)
얼음을 깨면 물이 생김 (06:48)

카메라·포트폴리오로 작품 남기기

  1. 아이템 창에서 카메라와 포트폴리오를 가져옵니다(검색: ‘카메라’).
  2. 카메라를 손에 들고 마우스 오른쪽 버튼 → 촬영. 또는 카메라를 바닥에 설치하고 오른쪽 버튼 → 잠시 뒤 그 카메라가 찍습니다.
  3. 포트폴리오를 들고 오른쪽 버튼 → 찍은 사진 아래 ‘캡션’에 이름을 씁니다(한글 입력이 가끔 깨지면 지우고 다시). 잘못 찍은 사진은 휴지통으로 지웁니다.
  4. ‘포트폴리오 내보내기’로 파일을 저장해 게임 밖에서 보거나 인쇄합니다.
① 세워서 만든 작품을 카메라로 찍기 (08:02)
① 세워서 만든 작품을 카메라로 찍기 (08:02)
② 포트폴리오의 캡션과 ‘포트폴리오 내보내기’ (08:46)
② 포트폴리오의 캡션과 ‘포트폴리오 내보내기’ (08:46)

10색상환으로 배우는 색 표현: 비슷한 색과 반대색

  • 한 가지 초록 대신 ‘초록과 비슷한 여러 색’으로
  1. 관찰: 기본 10색상환 보기 — 비슷한 색은 이웃, 반대색은 마주 봄
  2. 사이색 1: 두 색 사이(철 블록 자리)에 중간 색 블록 1개
  3. 사이색 2·3: 2개, 3개로 늘리며 더 가까운 색 순서로 놓기
  4. 작품: 아래 공터 바닥에 평면 작품 — 비슷한 색·반대색 활용
  • 찾을 거리: 블록뿐 아니라 셜커 상자·자수정 봉우리·다락문·네더 사마귀도 색이 됨
  • 템플릿 월드: 최대 40명, 구역은 보더 블록으로 분리 / 교사: /wb(월드 빌더)로 구역을 넘나들며 지도 / 학생: 번호 발판에 올라서면 자기 자리로 이동
▶ 영상: 건축 초보를 위한 필수 활동 추천!
▶ 영상: 건축 초보를 위한 필수 활동 추천!

10색상환 월드 둘러보기

  • 도입: 초록·검정 두 색 크리퍼와 여러 초록으로 된 크리퍼를 나란히 보여 줍니다.
  • 학생은 번호 발판으로 자리 이동 → 위에서 보면 구역마다 10색상환 4개(기본, 사이색 1·2·3)
  • 철 블록 자리에 사이색 블록을 넣고, 아래 공터에 평면 작품을 만듭니다.
  • 예시 작품: 사과나무·벚꽃나무·다이아몬드 블록·크리퍼 얼굴(비슷한 색), 노랑·파랑 미니언즈(반대색)
/wb
① 여러 초록으로 된 크리퍼 (00:06)
① 여러 초록으로 된 크리퍼 (00:06)
② 번호 발판으로 자리 이동 (00:55)
② 번호 발판으로 자리 이동 (00:55)
③ 철 블록이 놓인 사이색 자리 (01:48)
③ 철 블록이 놓인 사이색 자리 (01:48)
④ 반대색을 쓴 미니언즈 작품 (04:17)
④ 반대색을 쓴 미니언즈 작품 (04:17)
교사용 메모 · 10색상환 활동 메모
  • 픽셀아트를 한두 가지 색으로만 칠하는 학생이 많을 때 넣는 미술 융합 활동입니다(10색상환, 유사색·보색).
  • 도입: 크리퍼는 초록·검정 두 색이 아니라 초록과 비슷한 여러 색으로 되어 있다는 점을 보여 주며 시작합니다.
  • 템플릿 월드: 최대 40명이 한 번에 활동, 구역은 보더 블록으로 막혀 있음. 교사(호스트)는 /wb로 월드 빌더를 켜고 자유롭게 이동, 학생은 번호 발판에 올라가 자기 자리로 이동합니다.
  • 기본 10색상환은 NPC 안내와 링크 영상으로 먼저 관찰합니다(비슷한 색은 이웃, 반대색은 마주 봄).
  • 사이색 단계: 철 블록 자리에 1개 → 2개 → 3개. 두 색 중 더 가까운 쪽 순서로 놓고, 앞 단계에서 찾은 블록을 다시 써도 됩니다.
  • 블록만이 아니라 셜커 상자, 자수정 봉우리, 다락문, 네더 사마귀, 마그마 블록 같은 아이템도 색으로 쓸 수 있습니다(예시 작품, 영상 3:09~).
  • 응용: 아래 공터 바닥에 평면 작품. 예시: 벚꽃나무·다이아몬드 블록·크리퍼 얼굴(비슷한 색), 노랑·파랑 캐릭터(반대색).
  • 초등 3~6학년 미술 ‘색의 관계’ 2차시(1차시 색상환 채우기, 2차시 평면 작품)로 운영하고, 어떤 블록을 사이색으로 골랐는지 발표하게 합니다.

응용: 게임 그래픽 도트 아트

  • 픽셀아트는 게임 캐릭터·배경 그래픽(도트 아트)으로 이어집니다. 게임 만들기 수업에서 “내 게임의 보스·배경 그리기”로 확장합니다.
  • 작업 순서(영상 화면): 검은 외곽선 → 색 채우기와 명암 → 동작별 그림(서 있기·달리기)으로 애니메이션
  • 영상은 해설 없이 작업 화면만 보여 줍니다. 쓴 프로그램은 메뉴 구성(Sprite·Layer·Frame, Pixel-perfect)으로 보아 도트 전용 그림 프로그램 Aseprite입니다(00:14 화면).
  • 마인크래프트 픽셀아트 건축의 밑그림으로 써도 좋습니다.
① 해골 보스: 외곽선 그리기 (00:14)
① 해골 보스: 외곽선 그리기 (00:14)
② 해골 보스: 색·명암을 넣은 동작 그림 (02:45)
② 해골 보스: 색·명암을 넣은 동작 그림 (02:45)
③ 배경 ‘야경이 보이는 어두운 방’ 완성 (08:38)
③ 배경 ‘야경이 보이는 어두운 방’ 완성 (08:38)

코딩 응용: 에이전트 인벤토리로 그리는 픽셀아트

  • 에이전트 인벤토리 27칸(9칸×3줄)에 블록을 놓아 그림을 그리고, 코드로 그 배치를 바닥에 블록 그림으로 옮깁니다.
  • 여러 색이 있는 콘크리트·양털은 대표 블록(흰색) 하나로 인식되므로 금 블록·청금석 블록처럼 하나뿐인 블록을 씁니다. 빈 슬롯이 있으면 멈춥니다.
  • 코드(채팅 1): 줄마다 index 08 반복, 에이전트가 슬롯 (1 + index)에서 물건 이름 가져오기 로 블록 채우기, 위치 `(1 + index) 0 ~1. 둘째 줄은 슬롯 10 + index·z 2, 셋째 줄은 19 + index·z ~3`
  • 플레이어 기준 상대 좌표라 실행 중에는 움직이지 않습니다. 영상은 2019년 코드 커넥션 화면입니다. 지금은 에듀케이션의 코드 작성기(MakeCode)에서 에이전트 슬롯(1~27) 속 아이템을 알려 주는 get item detail 블록으로 같은 일을 합니다(2026-10 MakeCode 공식 문서 기준, minecraft.makecode.com).
① 에이전트 인벤토리에 그린 그림 (01:55)
① 에이전트 인벤토리에 그린 그림 (01:55)
② 코드로 옮긴 블록 그림 (02:12)
② 코드로 옮긴 블록 그림 (02:12)

관련 영상

관련 공식 자료

함께 보기

출처

  • 스티브코딩 유튜브 「마크 1교시_픽셀아트 만들기」
  • 스티브코딩 유튜브 「건축 초보를 위한 필수 활동 추천!」(2026)
  • 유튜브 「마크 1교시_픽셀아트 만들기」(2018-07-08)