아티클 레슨 ②: 표·이미지·HTML 소스

수업 자료에는 글만 있지 않습니다. 일정표나 비교표, 사무실 사진처럼 표와 이미지가 함께 있어야 이해되는 내용이 많습니다. 강의 빌더의 아티클 레슨 편집기에는 표 삽입, 이미지 삽입, HTML 소스 편집 기능이 들어 있습니다. 이 글에서는 이 세 가지를 쓰는 방법을 안내합니다. 제목·목록·링크 같은 기본 서식과 레슨 저장·미리보기는 별도 글에서 다룹니다.

1. 어디에 있나요

왼쪽 사이드바의 강의 빌더에서 과정의 편집을 열고, 레슨의 콘텐츠 유형을 아티클로 고르면 아티클 콘텐츠 카드가 나타납니다. 이 카드의 서식 도구 모음 중간에 이미지 업로드, 이미지 URL로 삽입하는 그림 아이콘, 표를 넣는 격자 아이콘이 나란히 있습니다. 카드 오른쪽 위의 편집과 HTML 소스 버튼으로 편집 방식을 바꿉니다.

2. 표 넣기

표를 넣을 위치를 누르고 표 삽입 아이콘을 누르면 3열 3행 표가 만들어집니다. 첫 행은 제목 행으로 연한 회색 배경이 깔립니다. 칸을 눌러 내용을 입력하고, 키보드 Tab 키를 누르면 다음 칸으로 넘어갑니다.

편집 영역 아래의 표 편집 줄에서는 표를 다듬을 수 있습니다. 표 안의 칸을 눌러 둔 뒤 버튼을 누르세요.

• 행 추가, 열 추가: 누른 칸의 아래, 오른쪽에 새 행과 새 열을 넣습니다.
• 행 삭제, 열 삭제, 표 삭제: 누른 칸이 있는 행, 열, 또는 표 전체를 지웁니다.
• 셀 병합, 셀 분할: 여러 칸을 선택해 하나로 합치거나, 합친 칸을 다시 나눕니다.
• 제목 행 전환: 첫 행을 제목 행으로 쓸지 일반 행으로 쓸지 바꿉니다.
• 셀 배경: 칸을 누른 뒤 색을 고르면 그 칸의 배경색이 바뀝니다.

표 편집 줄은 편집 방식에서만 쓸 수 있고, HTML 소스 방식에서는 숨겨집니다.

3. 이미지 넣기

이미지는 두 가지 방법으로 넣습니다.

• 이미지 업로드: 내 컴퓨터의 이미지를 고르면 커서 위치에 삽입됩니다. JPEG, PNG, GIF, WebP 형식이고 파일당 10MB까지이며, 한 번에 여러 장을 고를 수 있습니다. 이미지 파일을 편집 영역에 끌어다 놓거나 붙여넣어도 같은 방식으로 업로드됩니다.
• 이미지 URL로 삽입: 그림 아이콘을 누르면 이미지 URL을 입력하세요 창이 열립니다. 이미지 주소를 입력하고 확인을 누르면 삽입됩니다. 이미 인터넷에 올라가 있는 이미지를 쓸 때 편합니다.

삽입한 이미지는 본문 폭에 맞춰 표시됩니다. 업로드가 실패하면 형식이나 크기를 안내하는 알림이 뜹니다.

4. HTML 소스로 직접 편집하기

카드 오른쪽 위의 HTML 소스를 누르면 편집 영역이 어두운 입력칸으로 바뀌고, 지금까지 쓴 본문이 HTML 코드로 나타납니다. 이 상태에서 코드를 고치거나 새로 붙여 넣을 수 있습니다. 서식 도구 모음은 흐리게 바뀌어 쓸 수 없습니다.

코드를 입력한 뒤 편집을 누르면 일반 편집 화면으로 돌아가 결과를 눈으로 확인할 수 있습니다. 위 코드에서 두 칸을 합친 표 머리글과 형광펜 표시가 그대로 나타납니다.

소스 방식에서 저장한 HTML은 수강생 화면에 표시될 때 스크립트·iframe·onclick 같은 이벤트 속성이 제거됩니다. 또 편집으로 돌아오면 편집기가 지원하는 태그와 스타일만 남습니다.

5. 이렇게 활용해 보세요

• 일정, 준비물, 요금 비교처럼 항목이 여러 개인 내용은 표로 정리해 보세요. 첫 열에 셀 배경을 달리 칠하면 구분이 쉬워집니다.
• 수업 첫머리에 이미지를 한 장 넣어 오늘 배울 내용을 시각적으로 보여 주세요.
• 다른 곳에서 만든 표나 코드를 쓸 때는 HTML 소스 방식에 붙여 넣은 뒤 편집으로 돌아와 모양을 확인해 보세요.
• 표 하나만 다시 만들고 싶다면 표 삭제 후 새로 삽입하는 편이 빠릅니다.

6. 알아 두실 점

• 표와 이미지, 소스 편집 내용도 레슨 저장을 눌러야 서버에 반영됩니다.
• 이미지 업로드는 JPEG, PNG, GIF, WebP만 가능합니다. 그 밖의 형식은 올릴 수 없습니다.
• 수강생 화면에서 레슨이 어떻게 보이는지는 별도 글에서 다룹니다.
• 강의 빌더 이용 여부와 한도는 플랜별로 다릅니다.