단어 시험지 페이지 만들기

사내에서 영어 스터디를 참여했는데, 매번 단어 시험지를 준비하는 게 번거로웠습니다. 그래서 직접 웹 페이지로 단어 시험지 생성기를 만들어보기로 했습니다. 평소 하던 서비스 개발과는 조금 다른 성격의 페이지라 처음에는 막막했지만, 구현하면서 꽤 재미있는 경험을 할 수 있었습니다.

주요 기능

제가 만든 단어 시험지 페이지에는 크게 세 가지 기능을 넣었습니다.

• 단어/뜻 노출: 시험지(단어만)와 답안지(단어+뜻)를 모두 제공
• 랜덤 섞기: 문제 순서를 매번 다르게 섞기
• 인쇄 기능: 실제 시험지로 활용할 수 있도록, 불필요한 요소 없이 깔끔하게 출력하는 기능

이 중에서 가장 고민이 많았던 부분은 바로 인쇄 기능이었습니다. 웹 페이지를 그대로 출력하면 헤더, 푸터, 광고 영역 같은 불필요한 요소들이 함께 나와서 지저분했거든요.

인쇄용 CSS스타일: @media print

처음엔 인쇄 전용으로 display: none;을 수동 적용하려 했지만 비효율적이었습니다. 대신 @media print를 사용했죠.

@media print {
  /* 인쇄될 때만 적용될 스타일을 지정한다. */
  body {
    color: #000;
  }
  .header, .footer, .ad-banner {
    display: none;
  }
}

이렇게 하면 인쇄 시점에만 특정 요소를 숨길 수 있어서, 인쇄 전용 화면을 손쉽게 만들 수 있습니다. 실제로 적용해 보니 정말 마법처럼 불필요한 요소들이 싹 사라졌습니다.

삽질기록: link 태그의 media 속성

처음엔 @media print가 전혀 동작하지 않아 한참 삽질했는데, 원인은 <link> 태그의 media="screen" 속성 때문이었습니다.

<link rel="stylesheet" href="./src/style.css" media="screen" /> <!-- ❌ -->

media="screen" 속성 때문에 스타일시트가 화면에서만 적용된 거죠. media 속성을 제거하거나 all로 바꾸자 문제는 해결됐습니다.

<link rel="stylesheet" href="./src/style.css" /> <!-- ✅ -->

디버깅: Emulate CSS Media Type

매번 인쇄 미리보기를 열 필요 없이, 크롬 개발자 도구의 Emulate CSS media type 기능을 활용하면 print 상태를 실시간으로 확인할 수 있습니다. 덕분에 개발 속도를 크게 줄일 수 있었어요. 또, @page {}를 쓰면 인쇄 여백이나 머리글/바닥글까지 제어할 수 있다는 것도 알게 됐습니다.

마무리

이번 프로젝트는 규모는 작지만, 동료들이 실제로 유용하게 쓰고 있어 뿌듯합니다. 무엇보다 평소 잘 쓰지 않던 인쇄용 CSS를 직접 적용해 보며 웹을 다른 맥락(인쇄)에서 표현하는 경험을 할 수 있었던 게 가장 큰 배움이었습니다. 🚀