책 씹어먹는 즐거움

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

그림 파일 삽입의 필요성

정보에는 다양한 형식이 있다. 그리고 그 정보는 자신과 어울리는 형식을 취할 때 가장 효과적으로 전달된다. 만일 소리와 언어는 글이나 오디오 형식이 적합할 것이고 풍경이나 인물은 이미지 형식이 적합할 것이다. 그리고 형식을 잘 지킨다면 굉장히 효율적인 학습이 가능해진다. 효과적인 학습을 위하여 지식을 구조화하는 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 카드를 만들 때 어떻게 지식을 정리하고 구조화할 것인가를 고민하면서 발견한 SuperMemo 사이트의 문건이다. 이 사이트의 원문은 아래의 링크를 참조하길 바란다.

https://www.supermemo.com/en/articles/20rules

번역을 하다보니 영어 실력 부족인지, 원문이 너무 이상해서인지 알 수 없지만 잘 이해가 되지 않는 부분이 많아서 상당수 의역을 할 수밖에 없었다. 보다 뛰어난 실력을 가진 사람이 다시 번역해주었으면 좋겠다. 그리고 문건의 길이가 조금 길어 몇 번에 걸쳐서 분할하여 포스팅할 계획이니 참고하시기 바란다.

효과적인 학습을 위하여 지식을 구조화하는 20가지 규칙

이 문건은 학습 효율을 증진할 때 직면하게 될 가장 큰 어려움 중 하나인 지식의 구조화를 해결하는데 도움이 되고자 작성된 문건이다.

배움의 속도는 자료를 정리하하고 구조화하는 방식에 따라서 달라진다. 어떤 학습 자료가 얼마나 짜임새 있게 정리되었는지에 따라서 학습 속도가 몇 배씩 차이가 난다. 이러한 학습 속도의 차이는 생각보다 깜짝 놀랄만한 수준일 수 있다!

이 규칙들은 중요도 순으로 늘어놓았다. 먼저 제시된 규칙들은 사람들이 가장 흔하게 위반하지만 이 규칙을 준수할 경우 가장 많은 이익을 얻을 수 있는 규칙들이다.

이 문서는 기본적으로 간격 반복 시스템을 사용하여 학습을 진행할 것이라 점을 전제로 하고 있다. 즉, 한 번만 배우고 마는 것이 아니라 학습 자료를 최적으로 반복하여 학습할 것을 전제로 하고 있다는 말이다.

(역자 : 전체 규칙을 하나하나 상술하기 전에 20가지 규칙을 요약해서 제시하는 것이 보기 좋을 것이라고 판단하여 학습을 위하여 지식을 구조화하는 20 가지 규칙 요약을 아래와 같이 나열하니 참고하기 바란다.)

 --------- 요약(Summary) ----------

여기에 지식을 공식화하는 20가지 규칙을 요약한다. 상세히 살펴보면 처음 16개 규칙은 기억을 단순하게 만드는 것과 관련된 규칙들이라는 것을 눈치챌 수 있을 것이다. 그리고 어떤 규칙들은 서로 강력하게 중첩되어 있다. 가령, 배우기 전에 먼저 이해해야 한다는 규칙은 최소 정보 원칙이 적용 방식이이고 이것은 다시 모든 것을 단순하게 만드는 방법이다.

1. 배우기 전에 먼저 이해해야 한다.

2. 외우기 전에 먼저 배워야 한다.

개별적인 단순한 지식으로 쪼개서 카드로 만들기 전에 해당 내용의 큰 그림을 먼저 구축해야한다. 그리고 전체 그림에 빈틈이 있으면 다시 검토해야 한다.

3. 기초를 쌓은 뒤에 그 위에 지식을 구축해야 한다.

절대 복잡한 매뉴얼에 두발 모두 뛰어들면 안 된다. 보통 끝을 보지 못하기 때문이다. 하지만 잘 배우고 기억된 기초 지식들은 나머지 지식들을 수월하게 배울수 있게 해준다.

4. 최소 정보의 원칙을 고수해야 한다.

어떤 내용을 계속 잊게 된다면 일단, 최대한 해당 항목을 간단하게 만들어 봐야 한다. 만일 그래도 계속 잊게 되면, 다른 규칙들(빈칸 만들기, 그림그리기, 연상법, 집합을 열거형으로 바꾸기 등)을 적용해보길 권한다.

5. 빈칸 만들기는 쉽고 효과적이다.

삭제된 단어 또는 구절을 완성하는 방식의 학습을 빈칸 만들기라고 하는데 학습에 효과적인 방법일 뿐만 아니라 무엇보다 지식을 정리하고 구조화하는 속도가 빠르고 초보자에게 적극 추천되는 방법이다.

6. 이미지를 사용해라

그림 하나가 백마디 말보다 가치가 있다.

7. 연상법(mnemonic techniques)을 사용하라.

페그(peg) 리스트, 마인드 맵에 대해서 읽어보라. 토니 부잔의 책을 공부하고 기억을 재미나는 그림으로 바꾸는 방법을 배워라. 전화번호나 복잡한 수치를 공부하는 방법으로 최고다.

8. 그림에서 빈칸 만들기도 매우 좋다.

빈칸 만들기를 그림에 적용하여 그림의 일부를 가리고 이를 완성하는 방식의 학습 방법은 해부학이나 지리학 등을 배우는 데 정말 좋다.

9. 집합을 피해라.

지식을 어떤 요소의 집합으로 나열하면 해당 집합이 커지면 커질수록 사실상 외우는 것이 불가능하다. 집합을 기억하고 싶으면 열거식 지식으로 전환해야 한다.

10. 열거를 피해라.

집합보다 낫지만 열거식 지식도 기억하기 어렵다. 열거식 지식을 다뤄야 할 경우 빈칸 만들기를 사용하면 좋다.

11. 기억 간섭을 적극적으로 배제하라.

정말 단순한 내용의 학습에서도 다른 비슷한 항목이 있으면 서로 기억 간섭이 일어나 다루기 어려울 수 있다. 이런 경우는 예제, 문맥적 단서, 생생한 삽화, 정서적 상태에 대한 참조, 그리고 개인적 생활과의 연계를 이용해야 한다.

12. 문구를 최적화해야 한다.

수학적 방정식을 줄이는 것처럼 복잡한 문장을 영리하고 함축적이고 즐길 수 있는 격언처럼 줄일 수 있다.

13. 다른 기억들을 참조해야 한다.

다른 기억들 위에다가 기억들을 만들어 구축하면 일관되고 서로 꽉 물린 구조의 기억을 만들게 된다. 그리고 그러한 기억은 쉽게 망각되지 않는다. 기초적인 지식 위에 기억을 구축하고 의도적으로 중첩하여 학습함으로써 기억들 간의 간격을 채워야 한다.

14. 개인적으로 기억에 남는 예제를 사용하라.

개인적인 삶과 기억을 연결하는 것은 기억을 구축하는 가장 효과적인 방법일 것이다. 개인적인 삶은 참조할 수 있는 다양한 사실들과 사건들의 금광이다. 스스로 카드뭉치 컬렉션을 만든다면 이러한 개인적인 삶을 이용하여 기억을 구축해라.

15. 감정적인 상태에 의지하라.

감정은 기억과 연결되어 있다. 슬픈 상태에서 어떤 사실을 배운다면 슬플 때 그 기억을 떠올릴 가능성이 높다. 어떤 기억들은 감정을 유도하고 기억을 회상할 때 두뇌의 이런 속성을 이용할 수 있도록 도와준다.

16. 맥락에 의한 단서는 문구를 단순하게 해준다.

해당 기억의 맥락을 이용하면 기억을 단순하게 만드는 방법이다. 또, 선행 지식 위에 지식을 구축하게 해주고 기억의 간섭을 피하게 해준다.

17. 지식의 중첩은 최소 정보원칙에 위배되지 않는다.

몇 가지 형식의 중첩적인 지식의 사용은 매우 좋다. 동일한 사실을 다른 각도에서 보는 것을 외운다면 별달리 해로울 것이 없다. 특히, 단어 쌍과 같은 것을 배울 때는 중첩적인 질의를 수동적이거나 적극적으로 하는 것이 매우 쓸만하다. 문제를 해결하면서 해당 문제해결로 인하여 파생되는 단계를 기억하는 것은 지적 능력을 극적으로 향상시키는 방법이다.

18. 출처를 제공하라.

출처를 알면 해당 지식을 대상으로 중요성을 판단하고, 신뢰도를 측정하고, 갱신하고, 학습 프로세스를 관리하는데 도움을 얻을 수 있다.

19. 날짜를 명시하라.

날짜를 명시하면 시간이 지남에 따라 변하는 지식을 관리하기 좋다.

20. 우선순위를 두어라.

효과적인 학습의 모든 것은 결국 우선순위이다. 발전적 독서법(incremental reading)에서는 처음에는 매우 잘못된 방식으로 구조화된 지식들을 공부하는 것으로 시작해서 공부가 쌓이는 만큼 해당 지식들의 형태를 다듬고 개선시켜 나간다. 필요한 경우, 지식의 조각들을 다시 검토하고, 부분으로 분할하고, 재구조화하며, 우선순위를 다시 결정하거나 삭제할 수 있다.

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

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

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

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

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

Profiles and Preferences

 Preferences(환경 설정)

환경 설정은 Windows/Linux의 경우 도구 메뉴에 있고, Mac은 Anki 메뉴에 있다.

프로필이 여럿인 경우 변경 사항은 현재 프로필에만 적용된다.

<기본(Basic)>

환경 설정에서 기본탭의 설정 사항은 다음과 같다.

1번 부터 7번까지의 사항을 설명한다.

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 매뉴얼 전체 개요 페이지 가기