책 씹어먹는 즐거움

5. HTML 페이지가 이미지를 다루는 법

HTML 페이지는 순수하게 텍스트일 뿐이어서 이미지가 중간에 삽입되거나 하지 않는다. 그렇다면 웹 브라우저는 <img /> 요소를 어떻게 보여주는가?

웹 브라우저는 웹페이지를 위에서 아래로 차례대로 읽으면서 텍스트들은 바로바로 화면에 표시하고 <img /> 요소를 읽으면 일단, <img /> 요소가 표시될 공간을 확보해놓고 다음을 읽으면서 계속 화면을 표시한다.

웹 브라우저는 표시할 이미지 파일을 서버에서 가져와서 해당 이미지를 위하여 확보된 공간에 로딩하기 시작한다. 이 과정은 웹페이지 파일을 읽어서 표시하는 과정과 별도로 이루어진다. 

<img /> 요소로 정의된 이미지들은 기술적으로는 HTML 페이지에 삽입되는 것이 아니라 HTML 페이지에 링크로 연결되는 것이다. <img /> 요소가 하는 일은 참조하려고 하는 이미지가 배치될 공간을 준비하는 것이다.

이 때, <img /> 요소에 속성으로 이미지가 들어갈 공간의 크기(size)를 정하지 않았을 경우 이미지가 나중에 로드되면서 공간이 벌어져 웹 페이지가 출렁거리는 것을 볼 수 있다.

JPEG 형식

PNG 형식

GIF 형식

결론적으로 사진이나 복잡한 그래픽에는 JPEG를 사용하고 단색이나 로고, 기하학적 모양의 이미지에는 PNG나 GIF를 사용하는 것이 적절하다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0018 이미지를 보여주는 img 요소 03 이미지 다루기.apkg

3. 대체할 문구를 설정하는 alt 속성

alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

4. 이미지 크기 조절

이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

일단은 전통적으로 <img /> 요소에 width와 height 속성을 다음과 같이 부여해 크기를 조절해왔다.

이 때 width와 height 속성의 속성값은 항상 픽셀(px)의 수이다.

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg

1. <img /> 요소 사용법

HTML 페이지에 사진이나 그림 등의 이미지를 잘 사용하면 세련된 페이지를 만들 수 있다. 이런 경우 이미지를 집어넣기 위해서 사용하는 요소가 <img /> 요소다.

<img /> 요소는 이미지를 정의하는 빈요소로 보통 다음과 같은 형식으로 작성한다.

<img /> 요소에서는 src, width, height, alt의 4가지 속성을 잘 알아두어야 한다. 

2. <img /> 요소의 src 속성

<img /> 요소는 내용(content)이 없이 이미지를 보여주는 것이므로 속성(attribute)을 이용하여 해당 이미지를 불러와야 한다. 이 때 필요한 것이 src 속성이다. 

src 속성은 이미지 파일의 위치를 명시한다. 파일의 위치는 상대적인 파일의 위치뿐만 아니라, URL을 넣을 수도 있다. 

사용하는 URL에 대해서는 0015 URL 간략하게 이해하고 연습하기 포스팅에서 간단하게 다루었으니 참조하기 바란다. 

아래는 src 속성에 속성값을 URL로 넣은 경우다.

여기서 주의할 점은 URL의 마지막은 파일명이 되고, 웹페이지의 디폴트 파일처럼 디폴트 이미지라는 것이 설정되지는 않기 때문에 파일명까지 정확하게 써야 한다는 점이다. 

웹에서 원하는 이미지를 보았을 때, 보통 아래와 같이 마우스 우클릭으로 이미지 주소 복사를 통해 해당 URL을 얻을 수 있다.

src의 속성값으로 URL말고 상대적인 파일 위치를 넣을 수 있다. 즉, 서버 내의 특정 디렉터리에 있는 파일을 불러오는 로컬 링크(link)의 경우 웹페이지 파일이 속한 디렉터리를 기준으로 원하는 이미지 파일의 위치에 도달하는 경로를 명시할 수 있는데 이를 상대경로(relative path)라고 말한다.

가령, 불러오고 싶은 sun.jpg 라는 이미지 파일이 웹 페이지 파일과 동일한 디렉터리에 있으면 아래와 같이 속성값에 파일의 이름을 그대로 기입하면 된다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리의 하위 디렉터리(가령, images 디렉터리)에 있을 경우 해당 디렉터리의 이름 바로 뒤에 슬래쉬(/)를 붙여 이어서 경로를 작성한다. 이건 운영체제와 상관없이 슬래쉬(/)이다. 그리고 하위 디렉터리가 있는 만큼 얼마든지 슬래쉬로 이어서 하위로 내려갈 수 있다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리 보다 상위에 있다면 마침표 2개(..)로 나타내면 된다. 이는 최상위 디렉터리인 루트까지 이어질 수 있다.

사례를 한 번 살펴보자. 다음은 서버에 있는 웹사이트 관련 파일들의 디렉터리 구조다. 

각각의 웹페이지 파일의 <img /> 요소에서 src 속성의 속성값으로 sun.jpg 파일에 도달하는 상대경로를 기입한 경우다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0016 이미지를 보여주는 img 요소 01.apkg

IOE는 매우 유용한 추가 기능이므로 상세한 내용을 모두 설명하면 좋겠지만 아쉽게도 이 추가 기능은 사용자를 위하여 모든 것을 고려하여 빈틈없이 완성된 그런 소프트웨어는 아닌 것 같다. 실제로 작동하지 않는 메뉴도 있고, 매뉴얼도 없다. 개발자의 위키(Wiki) 페이지를 보아도 건드리지 말라는 설정과 주의할 부분이 많다. 개발자들이 상세한 내용을 파악하여 사용할 수는 있어도 비 개발자들이 이 추가 기능을 상세하게 파악하여 입맛대로 사용하기는 어려워 보이고 딱, 정해진 방식으로 안정적으로 사용하는 것이 좋을 것 같다. 물론, 그 정해진 방식으로만 사용해도 충분히 쓸만하다. 따라서 이 포스팅도 전형적이고 간단한 사용법 위주로 설명한다.

메인 메뉴에서 추가를 클릭하여 노트 추가창(Note Editor)을 열면 아래의 그림과 같이 각종 메뉴를 모아놓은 곳 가장 우측에  모양의 아이콘이 있다. 이 아이콘을 클릭한다.

그러면 아래와 같이 작업할 이미지와 간단하게 작업할 수 있는 화면이 나타난다. (작업 이미지가 나타나지 않고 작업할 이미지를 고르기 위한 대화상자가 나타날 수도 있다. 이 부분은 추후 다시 언급한다.)

이 작업할 화면으로 할 수 있는 일은 크게 Mask Editor 탭의 이미지 관련 작업과 Fields 탭의 필드 관련 내용으로 나눈다.

1) 작업할 이미지 고르기

위의 경우에는 작업할 이미지가 바로 나타났는데 이는 그 전에 [CTRL]-c로 클립보드에 저장된 이미지가 자동으로 나타나도록 되어 있기 때문이다. 클립보드에 아무런 이미지가 저장되어 있지 않을 경우에는 작업할 이미지를 선택할 수 있는 창이 별도로 나타난다. 

물론, 클립보드에 들어있는 이미지 말고 다른 이미지로 작업해야 하는 경우가 많을 것이다. 이 때에는 아래와 같이 [Change Image] 버튼을 클릭하여 이미지를 교체하면 된다. 

2) 간단한 이미지 편집 및 텍스트 집어넣기

①번은 마우스의 궤적에 따라 선을 그리게 해주는 버튼이다. 해당 버튼을 누르고 마우스 좌클릭을 하면서 움직이는 궤적대로 선이 그려진다.

②번은 직선 그리기 버튼이다. 버튼을 누른 후 시작점에서 마우스를 좌클릭하고 클릭을 유지한 상태에서 선을 끝내고 싶은 지점에서 클릭한 것을 놓으면 시작점과 끝점을 연결하는 선이 그려진다. 

③번은 텍스트 상자 버튼이다. 해당 버튼을 누르고 그림 위에 마우스를 좌클릭 하면 텍스트를 키보드로 입력할 수 있는 텍스트 상자가 생긴다.

3) 그림 가리개(Image Occlusion) 사용

가리개는 이미지의 특정 부위를 가려주고 정답을 확인할 때 그 가리개를 제거하여 무엇이 있는지 확인하게 해주는 도구다. 따라서 이미지를 가리는 용도로만 사용되므로 상대적으로 단지 가리개를 어떤 모양과 색으로 할지만 단순하게 결정하면 된다. 

①번 버튼은 사각 가리개 버튼이다. 사각형의 가리개를 만들게 해준다. 

②번 버튼은 원 가리개 버튼이다. 원 모양의 가리개를 만들게 해준다.

③번 버튼은 다각형 가리개 버튼이다. 아래 사진에서 범퍼를 가린 것처럼 조금 복잡하고 세밀하게 가리개를 만들고 싶을 때 사용한다. 

마지막으로 하단에 가리개 옵션이 있다. 가리개의 내부색, 선색, 선의 두께 등을 설정할 수 있게 해준다.

4) 카드 만들기

이제 가리개를 아래의 그림과 같이 전부 세팅했으면 이제 카드를 만들어야 한다. 카드를 만들 때는 아래의 그림에서 빨간 박스 안에 들어있는 세 가지 버튼 중에서 골라야 한다. 

Hide All, Reveal One

Hide All Reveal All

Hide One, Reveal All

그리고 버튼을 누르면 가리개의 숫자만큼의 카드가 그 자리에서 바로 생성된다.

① Hide All, Reveal One

아래의 그림을 보자 카드의 앞면은 가리개로 가린 모든 부분이 숨어 있고, 카드에서 물어보고자 하는 부분의 가리개만 색깔이 다르게 나타난다. [답보기] 버튼을 클릭하면 아래와 같이 색깔이 다른 부분만 답이 노출된다. (이때, 다른 가려진 부분을 보고 싶으면 Toggel Masks 버튼을 클릭하면 된다.)

즉, Hide All, Reveal One 버튼을 눌러 카드를 만들면, 카드 앞면은 가리개로 가린 모든 부분이 가려져 있게 하고, [답보기] 버튼을 눌렀을 때, 카드에서 물어보는 부문 1개만 가리개를 치워서 답을 확인하게 해주는 형식의 카드를 만든다. 

② Hide All Reveal All

아래의 그림을 보자 카드의 앞면은 가리개로 가린 모든 부분이 숨어 있고, 카드에서 물어보고자 하는 부분의 가리개만 색깔이 다르게 나타나는 것은 위의 경우와 동일하다. 하지만 [답보기] 버튼을 클릭하면 아래와 같이 가리개로 가려져 있던 모든 부분이 전부 노출된다는 점이 위와 다르다. 

즉, Hide All, Reveal All 버튼을 눌러 카드를 만들면, 카드 앞면은 가리개로 가린 모든 부분이 가려져 있게 하고, [답보기] 버튼을 눌렀을 때, 모든 가리개를 치워서 답을 확인하게 해주는 형식의 카드를 만든다. 

③ Hide One, Reveal All

아래의 그림을 보자 이 경우는 앞서 두 가지 버튼과 달리 카드의 앞면에는 오직 1개의 가리개만 있고 다른 가리개로 가렸던 부분은 전부 노출되어 있다. 그리고 [답보기] 버튼을 클릭하면 아래와 같이 가리개로 가려져 있던 노출되면서 결국 가리개로 가려져 있던 모든 부분이 노출된다. 

즉, Hide One, Reveal All 버튼을 눌러 카드를 만들면, 카드 앞면은 카드에서 물어보고자 하는 항목 1개만 가리개로 가려지고 다른 모든 부분은 그대로 노출된다. 그리고 [답보기] 버튼을 눌렀을 때, 모든 가리개를 치워서 답을 확인하게 해주는 형식의 카드를 만든다. 

위에서 Hide All, Reveal One, Hide All Reveal All, Hide One, Reveal All의 세 버튼 중 하나를 눌러 카드를 만들기 전에 입력 필드에 필요한 정보를 입력하면 좋다. 물론, 아무것도 입력하지 않아도 아무런 문제없이 카드를 만들 수 있다. 하지만 제목이나 각종 관련 사항들을 정리하고 확인할 수 있도록 필드에 값을 입력하면 보다 충실한 학습이 가능해진다.

아래의 그림과 같이 Fields 탭을 눌러 이동한다.

그러면 아래와 같이 입력 필드들이 나타난다. 

① Header

학습할 이미지의 제목이나 이름를 나타내는 필드다. 카드 앞면에서부터 나타나고 이미지의 상단에 배치된다.

② Footer

학습할 이미지를 학습할 때 참고할만한 힌트나 유의사항 등을 표시하는 필드다. 카드 앞면에서부터 나타나고 이미지의 하단에 배치된다.

③ Remarks

이미지에서 가려진 부분을 속으로 생각하고 나서 [답보기] 버튼을 눌렀을 때, 알아두면 좋은 추가적인 정보나 디테일한 내용 등을 적어놓는 필드다. 카드 뒷면에 노출된다. 

④ Sources

학습하고 있는 이미지의 출처가 되는 책이나 자료, 웹 사이트 등을 적는 필드다. 카드 뒷면에 노출된다.

⑤ Extra

Extra 1과 Extra 2의 두 개의 필드가 있다. 카드 뒷면에 노출되는 필드인데, 기타 필요 사항이 있을 때 적는다. 

Anki에서 입력 필드를 설정하는 것은 보통 노트 유형에서 결정된다. 하지만 IOE의 경우 Anki의 노트 추가창이나 탐색기를 이용하여 필드를 편집하면 오작동이 일어나게 되므로 설정을 변경하지 않는 것이 좋다. 

각 필드별로 필요한 내용을 기입하면 아래의 사진과 같이 카드가 나타난다. 카드 앞면 부분이 먼저 나타나고 [답보기]를 클릭하면 카드 뒷면 부분이 추가적으로 나타난다.

간단하게 그림 파일을 삽입하여 카드 만들기 

IOE 01 Image Occlusion Enhanced 소개

IOE 02 Image Occlusion Enhanced 설치하기

IOE 03 Image Occlusion Enhanced 사용하기  ☜ 현재 포스팅

앞에서 포스팅한 간단하게 그림 파일을 삽입하여 카드 만들기에서 이미지를 카드에 삽입하는 방법을 배웠다. 하지만 동시에 이러한 작업 방식으로는 품이 너무 많이 들어서 다량의 이미지를 학습에 사용하기 어렵다. 이번에는 그러한 문제를 해결할 수 있는 추가 기능(add-on)인 Image Occlusion Enhanced(이하 IOE로 지칭)를 소개하고자 한다.

아래의 이미지처럼 자동차의 부위별로 선을 그어 해당 부위의 명칭을 설명해주는 방식의 도판은 학습용으로 자주 사용되는 방식이다. 한 그림 안에 다량의 지식을 집약할 수 있고 서로의 관련성이 이미지에서 유기적으로 통합되어 있기 때문에 종합적이고 방대한 지식을 이미지 하나로 축약해서 전달할 수 있기 때문이다. 그렇다면 우리는 이러한 이미지를 어떠한 방식으로 학습했을까?

뭔가 특이하고 혁신적인 공부방법이 있지는 않았던 것 같다. 그저 해당 화살표가 가리키는 부위를 확인하면서 그 부위의 명칭을 입으로 발음해보고 속으로 되새겨보고 어느 정도 익혔다고 생각하면 각각의 명칭을 손가락으로 가리거나 포스트잇 같은 것으로 살짝 가리고 제대로 기억하는지 답을 떠올려보면서 가린 것을 치우고 제대로 기억했는지 확인하는 방식으로 공부했을 것이다. 

우리가 위와 같은 이미지 도판을 이용하여 학습할 때 사용하던 방식을 그대로 쓸 수 있도록 효과적으로 도와주는 Anki의 추가 기능(add-on)이 바로 IOE(Image Occlusion Enhanced)이다. 이 이름을 한국어로 번역하면 “이미지 가리개 개선판” 정도로 번역되는 것인데 말 그대로 이미지에서 특정 부위를 가려서 그 부위의 모양이나 내용을 떠올리면서 공부할 수 있도록 해주는 것이다. 

그럼 이건 어떻게 사용될까? 실제로 사용되는 경우를 봐야 바로 감이 올 것이므로 실제로 위의 이미지로 그림 가리개 카드를 만든 것을 살펴보자. 

아래는 IOE로 만든 카드를 학습하는 모습니다. 카드 앞면을 보면 위의 이미지에서 car door, tire, Front bumper 등 각 부위별 명칭이 네모난 사각형 박스로 가려져서 나타난다. 이 카드는 사각형 박스 중 빨간색으로 되어 있는 박스 속에 어떤 단어가 있는지 묻고 있다. 그리고 [답 보기] 버튼을 클릭하면 빨간 사각형 박스가 사라지면서 그 내부에 어떤 단어가 있었는지 드러난다.

총 6개의 사각형이 있으므로 1개의 사각형 박스당 1개의 카드가 만들어져 우리가 공부할 그림이 6개의 카드가 되어 나타난다. 이 때 우리가 한 일이라곤 추가 기능인 IOE로 이미지 내부에 6개의 사각형을 그린 것뿐이다. 그러면 Anki는 자동적으로 6개의 학습용 카드를 만들어서 이 이미지를 완전히 숙지하게 도와주게 된다. 만일, 이 추가 기능이 없었다면 우리는 6개의 조금씩 상이한 버전의 그림을 그려서 일일이 카드를 만드는 수고를 했어야만 할 것이고 학습 이전에 해야할 노동으로 학습 의욕의 저하를 겪었을 것이다. 이 추가 기능이 수많은 해부학 도판을 외워야 하는 의대생들의 전폭적인 지지를 받는 까닭이다.

이제 다음부터는 Image Occlusion Enhanced를 실제로 설치하고 간단하게 사용해보자. 

간단하게 그림 파일을 삽입하여 카드 만들기 

IOE 01 Image Occlusion Enhanced 소개  ☜ 현재 포스팅

IOE 02 Image Occlusion Enhanced 설치하기

IOE 03 Image Occlusion Enhanced 사용하기

그림 파일 삽입의 필요성

정보에는 다양한 형식이 있다. 그리고 그 정보는 자신과 어울리는 형식을 취할 때 가장 효과적으로 전달된다. 만일 소리와 언어는 글이나 오디오 형식이 적합할 것이고 풍경이나 인물은 이미지 형식이 적합할 것이다. 그리고 형식을 잘 지킨다면 굉장히 효율적인 학습이 가능해진다. 효과적인 학습을 위하여 지식을 구조화하는 20가지 규칙에서 6번 규칙

이 이러한 이미지 사용을 적극 권장하고 있으니 참고하기 바란다. 

가령, 영어단어를 예로 들어보자. car라는 단어를 백날 설명하는 것보다 그림으로 보여주는 것이 훨씬 효과적이다. 그렇다면 Anki에서 앞면에는 car의 그림을 보여주면서 뒷면에는 이것을 영어로 'car'라고 한다는 것을 알려주는 영어단어 공부 카드를 만들면 좋을 것 같다. 만들어보자. 

기본 카드 유형으로 영어단어 공부 카드 만들기

보통 매뉴얼에서 미디어(Media) 삽입에 대해서 간략하게 설명을 하지만, 매뉴얼이 상당히 간접적으로만 설명하고 있어서 우선, 아무런 추가 기능(add-on)이 없을 때 어떻게 이미지나 그림 파일을 삽입해서 카드를 만드는지 알아보자.

우선, 사진을 찍든 인터넷에서 다운을 받든 자동차 관련 그림 파일을 준비한다. 그리고 원하는 카드뭉치를 만들고 노트 추가창(Note Editor)로 들어가서 노트 유형은 기본 카드 유형인 Basic 으로 고른다. Front 필드에 자동차 사진 파일을 집어넣는다. 

Front 필드에 사진 파일을 넣는 방법은 간단하다. 해당 파일을 [CTRL]-c 키로 복사해서 프론트 필드에 [CTRL]-v 키로 붙여넣으면 된다. 즉, 복사붙여넣기를 하면 된다. 

이제 Back 필드에 'car'라고 적고 [추가] 버튼을 클릭하면 카드가 만들어진다.

완성된 카드를 열어보니 우선 처음에는 자동차 그림만 나타나고 아래의 [답 보기] 버튼을 클릭해보니 해당 카드의 영어단어인 'car'가 답으로 나타난다. 상당히 쓸만한 것 같다.

그런데 이 방식에는 문제점이 있는 것 같다. 가령, 다음과 같은 그림이 있을 때 과연 어떻게 카드를 만들어야 할까?

위의 그림은 우리가 각종 단어집 등에서 흔히 보는 그림으로 하나의 사물에 각 부위별 명칭을 표시하고 있다. 이 모든 부위를 위에서 설명한 기본 형식의 카드로만 만들게 되면 일단, 위의 그림에서 단어와 화살표를 지우고 필요한 화살표만 남겨야 한다. 즉, 이 그림의 약간 변형된 버전이 6개가 필요한 것이다. 열심히, 포토샵이나 그림판 등으로 부위별 사진을 잘 만들어서 카드를 일일이 만들 수는 있다. 그런데 그렇게 일일이 작업 하려고 하면 너무나 많은 시간과 노력이 들어간다. 지금이야 사진 한 장에 불과하니 어찌어찌 해볼 수 있지만 당장 수십개의 그림만 처리하려고 해도 하루 종일 작업량이 훌쩍 늘어난다. 해결책이 필요하다.

당연한 이야기지만 이런 경우를 위하여 만들어진 추가 기능(add-on)이 있다. 바로 Image Occlusion Enhanced 이다. 

다음에는 이 추가 기능(add-on) Image Occlusion Enhanced에 대해서 알아보자. 

관련 포스팅들...

간단하게 그림 파일을 삽입하여 카드 만들기  ☜ 현재 포스팅

IOE 01 Image Occlusion Enhanced 소개

IOE 02 Image Occlusion Enhanced 설치하기

IOE 03 Image Occlusion Enhanced 사용하기

Anki 매뉴얼 전체 개요 페이지 가기

문서는 Anki 2.0 유저 매뉴얼을 번역한 문서입니다.

기본적으로 구글 번역을 통해서 초벌을 번역하고 이를 수정하는 방식으로 번역했습니다. 

또한, 본문에 충실한 직역보다는 매뉴얼을 숙지하기 쉽도록 의역 위주로 번역하였습니다.

Anki 매뉴얼 전체 개요 페이지 가기

Cards and Templates

 Card Styling(카드 꾸미기)

YouTube에서 카드를 꾸미는 것에 대한 동영상을 볼 수 있다.  

카드창을 열어보면 앞면 템플릿과 뒷면 템플릿 사이에 카드 스타일을 설정할 수 있는 스타일 섹션이 있다.

여기에서 카드의 배경색, 기본 글꼴, 텍스트 정렬 등을 변경할 수 있다.

스타일 섹션에서 사용할 수 있는 표준 옵션은 다음과 같다.

 font-family

카드에 사용할 글꼴의 이름이다. 위의 카드창에는 다음과 같이 작성되어 있다. 글꼴의 이름에 "MS Unicode"와 같은 공백이 있으면 이 문장에서와 같이 큰 따옴표로 묶어주어야 한다. 하나의 카드에 여러 글꼴을 사용할 수 있다. 이에 대한 정보는 아래를 참조하라.

 font-size

픽셀 단위로 적는 글꼴크기이다. "px"라는 단위를 삭제하면 안된다.

 text-align

텍스트를 중앙(center), 왼쪽(left), 오른쪽(right)로 정렬

 color

텍스트의 색이다. "blue", "lightyellow"와 같이 간단하게 색상이름을 쓰거나 HTML 색상 코드를 사용하여 임의의 색상을 선택할 수 있다. 자세한 내용은 이 웹페이지를 참조하라.

 background-color

카드의 배경색이다.

이 스타일 섹션에는 CSS를 마음껏 사용할 수 있다.

아마도 고급 사용자라면 배경 이미지나 그래디언트를 추가하는 등의 일을 하고 싶을 것이다.  

만일, 특정 서식이나 형식을 얻는 방법이 궁금하다면 웹을 검색하여 CSS로 어떻게 하는지 확인해볼 수 있다.

아마도 정말 많은 관련 문서들을 볼 수 있을 것이다.

스타일은 해당 노트유형을 사용하는 모든 카드에 공유된다.

즉, 현재의 노트유형에서 스타일을 수정하면 해당 노트유형을 사용하는 다른 카드도 전부 수정된다.

가령, 노트유형이 기본(역방향 카드 포함)이라면 하나의 노트당 2개의 카드가 생긴다.

따라서 기본(역방향 카드 포함)의 스타일을 변경하면 2개의 카드 전부 변하게 된다.

아래의 카드창에서는 background-color를 white에서 yellow로 변경한 결과, 이 노트유형에 포함된 카드1과 카드2 전부 배경색이 노란색으로 변경되었다.

물론 카드별로 스타일을 다르게 지정할 수도 있다.

다음 예제는 첫번째 카드는 파란색 배경을 사용하게 하는 코드이다.

Anki 매뉴얼 전체 개요 페이지 가기