그림판·화이트보드

온라인 화이트보드·그림판이란

온라인 화이트보드는 웹 브라우저 화면을 칠판이나 화이트보드처럼 쓰는 그리기 도구입니다. 프로그램을 설치하지 않고 주소만 열면 바로 쓸 수 있어, 온라인 수업에서 풀이를 적거나, 회의에서 구조를 그려 설명하거나, 아이가 낙서하는 판으로 널리 쓰입니다. 그림판이라는 말은 윈도우에 기본으로 들어 있는 그림 프로그램 이름에서 왔지만, 검색에서는 설치 없이 간단히 그릴 수 있는 웹 페이지를 찾는 뜻으로도 많이 쓰입니다.

이 페이지의 판은 손으로 쓰는 판서에 맞춰 만들었습니다. 펜과 형광펜, 도형과 글자를 쓸 수 있고, 그리기와 지우기는 모두 되돌리기로 취소할 수 있습니다. 판은 화면 폭에 맞춰지며 전체 화면을 켜면 모니터 전체가 판이 됩니다. 그린 그림은 이 브라우저에 자동으로 보존되어 새로 고침해도 남고, 필요할 때 PNG 파일로 저장합니다.

도구와 쓰는 법

도구 막대에서 도구를 고르고 색, 굵기(글자는 글자 크기, 지우개는 지우개 크기), 배경을 정한 뒤 판에 그립니다. 도구마다 하는 일은 다음과 같습니다.

색은 검정·흰색·회색·빨강·주황·노랑·초록·파랑·보라·분홍 10가지를 바로 고를 수 있고, ‘직접’을 누르면 원하는 색을 고를 수 있습니다. 사진이나 로고에 쓰인 색을 그대로 쓰고 싶다면 이미지 색상 코드 추출로 색 코드를 찾은 뒤 ‘직접’에 넣으면 됩니다. 색과 굵기는 새로 그리는 것부터 적용되고, 이미 그린 것은 바뀌지 않습니다.

배경은 흰색, 격자(32px 간격), 줄(40px 간격), 칠판(짙은 먹색) 가운데 고릅니다. 격자는 그래프·도형 설명에, 줄은 글씨 연습이나 받아쓰기에 알맞습니다. 칠판을 고를 때 펜이 검정이면 흰색 분필로 바뀌고, 흰 판으로 돌아오면 다시 검정이 됩니다. 배경을 바꿔도 이미 그린 그림의 색은 그대로라서, 검정으로 그린 것은 칠판 바탕에서 잘 보이지 않습니다. 칠판은 처음 시작할 때 고르는 편이 좋습니다.

판의 크기는 화면에 맞춰 정해집니다. 전체 화면을 켜거나 휴대폰을 가로로 돌려 판이 넓어지면 그릴 자리가 늘어나고, 반대로 판이 좁아져 그림이 넘치면 그림 전체가 보이도록 비율대로 줄여서 보여 줍니다. 판 밖으로 잘려 사라지는 부분은 없습니다.

수업·회의에서 쓰는 법

온라인 수업이나 화상 회의에서 판서를 보여 줄 때는 전체 화면과 화면 공유를 함께 씁니다.

1. 도구 막대 오른쪽의 전체 화면을 누르거나 F 키를 누릅니다. 주소창과 페이지 메뉴가 사라지고 판이 화면을 가득 채웁니다.
2. 화상 회의 프로그램에서 화면 공유를 누르고 이 브라우저 창(또는 탭)을 고릅니다. 모니터가 두 대라면 한쪽에 판을 띄워 두고 그 화면을 공유하면 편합니다.
3. 설명하면서 그리고, 한 장이 끝나면 PNG로 저장한 뒤 전체 지우기로 다음 판을 시작합니다.
4. Esc 키나 나가기 버튼으로 전체 화면을 끝냅니다. 그린 그림은 그대로 남습니다.

마우스로는 글씨를 또박또박 쓰기 어렵습니다. 태블릿이나 터치 노트북이 있다면 터치펜으로 쓰는 편이 훨씬 자연스럽고, 마우스만 있다면 글자 도구로 입력하고 선과 화살표로 연결하는 방식이 깔끔합니다. 교실 TV나 전자칠판에 노트북을 연결했다면 전체 화면을 켠 채 터치로 바로 그릴 수 있습니다.

아이가 낙서판으로 쓸 때도 전체 화면을 켜 두면 다른 링크를 잘못 누를 일이 줄어듭니다. 판 위에서 그리는 동안에는 페이지가 스크롤되지 않고, 두 손가락이 닿으면 확대하려는 손짓으로 보고 그리던 선을 취소합니다.

단축키

단축키는 판이나 도구 막대를 한 번 누른 뒤에 동작합니다. 본문을 읽다가 누른 글자로 도구가 바뀌지 않게 하기 위해서입니다. 한글 입력 상태에서도 같은 자리의 키로 동작하며, 글자를 입력하는 중에는 쓰지 않습니다.

맥에서는 Ctrl 대신 Command(⌘) 키를 써도 됩니다.

저장·불러오기와 자동 보존

PNG 저장은 지금 보이는 판을 그대로 그림 파일로 만듭니다. 크기는 판의 화면 크기에 화면 픽셀 밀도(최대 2배)를 곱한 값이고 긴 변은 4,096px을 넘지 않으며, 파일 이름은 whiteboard-날짜-시각.png입니다. ‘투명 배경’을 켜면 배경색·격자·줄을 빼고 그린 것만 남기므로, 다른 문서나 슬라이드 위에 겹쳐 쓰기 좋습니다.

이미지 불러오기로 사진, 문제지, 지도, 화면 캡처를 판 맨 아래에 깔고 그 위에 표시할 수 있습니다. 불러온 이미지는 긴 변 1,600px 이하로 줄여 판 가운데에 맞추며, 판에는 한 장만 깔립니다. 지우개로는 지워지지 않고 ‘이미지 빼기’로 뺍니다. 서명만 따로 그려 투명 이미지로 잘라 쓰려면 사인 만들기가 더 알맞습니다.

그림은 바뀔 때마다 이 브라우저의 저장소(localStorage)에 자동 보존됩니다. 새로 고침하거나 창을 닫았다 열어도 마지막 판이 그대로 나오고, 배경 설정도 함께 남습니다. 서버에 올리는 것이 아니어서 다른 기기나 다른 브라우저에서는 보이지 않고, 브라우저의 사이트 데이터를 지우거나 시크릿 창을 닫으면 사라집니다.

브라우저는 사이트마다 저장 공간을 몇 MB 정도로 제한합니다. 큰 이미지를 불러와 공간이 모자라면 이미지를 빼고 그림만 보존하고, 그래도 모자라면 도구 아래에 안내가 나옵니다. 이럴 때는 PNG로 저장해 두세요. 새 그림을 시작하려면 전체 지우기를 누릅니다. 확인을 한 번 더 묻고, 지운 뒤에도 되돌리기로 되살릴 수 있습니다. 되돌리기 기록은 새로 고침하면 비워집니다.

다른 서비스와의 차이

화이트보드라는 이름으로 나오는 웹 서비스는 크게 두 갈래입니다. 여러 사람이 같은 판을 함께 쓰는 협업형과, 혼자 화면에 그리는 판서형입니다. 이 도구는 판서형입니다.

서버가 없으니 그린 내용이 밖으로 나갈 걱정이 없고, 가입이나 설치 없이 바로 쓸 수 있습니다. 대신 공유 링크, 실시간 공동 편집, 스티커 메모와 템플릿, 끝없이 넓은 캔버스 같은 기능은 없습니다. 여러 사람이 동시에 그려야 하는 회의라면 협업 화이트보드 서비스가 맞고, 한 사람이 설명하며 그리는 수업·발표에는 이 판처럼 가벼운 도구가 빠릅니다.

윈도우 그림판처럼 사진을 편집하는 프로그램과도 다릅니다. 영역 선택·자르기, 페인트 통 채우기, 스포이드, 크기 조절 같은 픽셀 편집 기능은 없고, 선·도형·글자를 하나의 획으로 다뤄 되돌리기와 획 지우개로 고치는 판서용 도구입니다.

자주 묻는 질문

그리기, 이미지 불러오기, PNG 만들기는 모두 브라우저 안에서 처리되며 서버로 전송되지 않습니다. 자동 보존은 이 브라우저의 localStorage에만 기록됩니다.