[TIL.23] 폰트 활용 고정폭monospace 가변폭 폰트 plain text string 특수문자로 만든 박스, 표 간격

🐞 이슈 

특정 사이트를 크롤링한 텍스트 데이터를 화면에 뿌려주면서 맞닥드린 이슈...

\n으로 줄바꿈 표시도 된 데이터라 몇개만 확인하고 아무 이상 없겠거니 했는데 웬걸 특수문자로 표를 만드는 데이터가 있었다.

 

예를들면 아래와 같은 경우이다.

┌─────────────┐
│네모박스                  │
│네모박스                  │
│네모박스                  │
└─────────────┘

 

 

그런데 이 데이터를 콘솔에 찍어보면 너무나 예쁘게 네모 반듯한 모양으로 찍히는 것이 아닌가...!?

그때서야 폰트의 문제라는걸 깨달았다. 

 

 

 

현재 프로젝트는 공통 폰트로 프리텐다드를 사용하고 있었고 당연히 해당 컨텐츠 영역도 프리텐다드로 되어있는데

프리텐다드 폰트는 문자마다 폭이 다른 가변폭 폰트이기때문에 특수문자와 띄어쓰기로 표를 만든다고 해서 네모난 박스모양이 제대로 그려지지 않는다. 

 

고정폭 폰트이면서 폰트자체가 촌스럽지않은 크롬 콘솔창의 기본 폰트인 consolas를 쓰고 싶지만... 저작권의 문제가 있다. 그리고 사실 콘솔을... 나는 일하면서 자주봐서 내눈에만 예뻐보이는 걸지도....🤔ㅋㅋㅋㅋㅋ

 

 

✅ 고적폭 monospace 폰트로 변경

어쨌든 폰트의 문제라는 것을 깨닫고 해당 페이지의 기본 폰트를 대표적인 고정폭 폰트인 굴림체를 적용해보니 표가 아래처럼 반듯하게 나오는 걸 확인했다. (위에 코드블록에 있던 텍스트를 그대로 폰트만 변경)

 

고정폭 폰트인 굴림체를 사용할 경우

┌─────────────┐
│네모박스                  │
│네모박스                  │
│네모박스                  │
└─────────────┘

 

그렇지만 아무래도 이거 하나때문에 페이지 전체를 굴림체를 적용하는건 디자이너한테 욕 오지게 먹을 것 같으므로.... 표가 있는 경우 표 영역만 굴림체를 적용하기로 했다.

function wrapBox(stringData) {
      // 박스 시작 특수문자 ┌와 박스를 닫는 특수문자 ┘ 사이의 데이터만 추출하는 정규식
      const boxRegex = /┌[\s\S]*?┘/g; 

      // <pre> 태그로 박스 영역을 감싸고 굴림체를 적용하기위해 box-shape라는 클래스명 추가
      const wrappedData = stringData.replace(boxRegex, (match) => `<pre class="box-shape">${match}</pre>`);

      return wrappedData;
    }

 

스타일로 굴림체 폰트 적용 

.box-shape{
    letter-spacing: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "굴림체", monospace ;
}

 

 

 ❗ 주의 사항 및 참고

고정폭 폰트라고 해도 언어가 다를 경우, ?와 같은 기호의 경우 그 너비가 다르다. 사실 이게 영어를 기준으로 하면 완벽하게(?) 맞는 것 같은데 한글을 기준으로 하면 좀 틀어진다고 해야하나...? 애매해 진다.

애초에 영어의 경우 1byte고 한글의 경우 2byte라 그런건가 싶은데 영어는 소문자 'i'랑 대문자 'I'랑 느낌표 기호 '!' 모두 같은 너비를 갖지만 한글의 경우 '이'의 너비는 'i' 두개, 즉 'ii'와 동일한 너비를 갖는다. 

 

┌─────────────┐
│네모_box                  │
│네모_BOX                  │
│네모????                  │
└─────────────┘

때문에 위에서 '박스'라는 단어를 영어와 기호로 바꿨을때 한자당 두개의 알파벳 및 기호를 사용해 그 너비를 맞출 수 있다.

 

참고로 한글은 '~체'가 붙은 글꼴, 영어의 경우 monospace 가 붙은 글꼴들이 고정폭 글꼴이다.