골아픈 한글 캐릭 문제 해결책 (완전정복!)

§

中文, 日文, 한글 같은 non-latin 캐릭들은 하나의 캐릭에 두개의 ascii 값어치가 부여 됩니다.

아마 php string 도 이래서 한글 자를때 제대로 작동되지 않는걸로 알고 있는데 저는 php알못이라 확신은 못하겠습니다.

자스 뿐만 아니라 이런 번역에서도 오류가 나는듯 합니다. ㅎㅎㅎ

오늘 (지금 토요일 아침입니다. 이글은 화요일 정도 출판되겠지만. ㅎㅎㅎ) css variable 을 공부하다가 [네. css 도 자스 (javascript) 처럼 var 이 존재한답니다. 모르셨나요? ㅎㅎ ] css var 을 실용적으로 사용할 수 있는 타자기 효과를 잠깐 코딩해보았습니다.

아, 타자기 효과란 매우 오래된 기법인데, 제가 기억하기로 아마 CSS Tricks 에서 대략 2011년경에 어느 개발자 분이 이 css 효과를 처음 시연해 보였었고, 나중에 Lea Verou (지금은 MIT 에서 css UX 박사과정을 밟고 있는) 에 의해 널리 알려진 css 기법 입니다.

별거 아닙니다. css 의 steps() 를 이용해서 글씨가 마치 타이핑 되는 듯한 효과를 보여주는 기법입니다. 이렇게.

한국어를 배워보자.

꽤 효과적인 Call to Action 을 구축할 수 있음에도 이 기법이 자주 사용되지 않는 이유는 css 코드에서 보시다시피 글자 넓이에 따라 width 를 잡아줘야 하는게 maintainable 한 코드가 아니기 때문입니다. (글짜수 가 바뀔때마다 어떻게 매번 width 를 바꿔주나요?)

이런 골치아픈 (유지하기 힘든) 코드를 해결해 주는게 css 의 variable 기능 입니다.

일단 저 <p> </p> 의 넓이를 em 이나 px 로 잡지 않고, ch 로 잡습니다. 이렇게요.

.typing2{ width: 18ch; }

한국어를 배워보자.

넓이를 18ch 로 지정한 거는 저 문단에 18개의 캐릭이 존재한다는 뜻 입니다.

여기서 의문이 생기실 수 있는데, 나는 아무리 세봐도

한(1)국(2)어(3)를(4) (5)배(6)워(7)보(8)자(9).(10)

이렇게 10개의 캐릭밖에 안보이는데? 라고 생각하실 수 있습니다. 이 글의 제일 처음으로 올라가시면 제가

中文, 日文, 한글 같은 non-latin 캐릭들은 하나의 캐릭에 두개의 ascii 값어치가 부여 됩니다.

이렇게 써놨죠?

이제 다시 캐릭을 세봅시다.

한(2)국(4)어(6)를(8) (9)배(11)워(13)보(15)자(17).(18)

18개 맞죠? ㅋㅋㅋㅋㅋ

넓이 (width) 를 이렇게 ch 로 잡으면 골아픈 한글 글자 자르기 문제를 해결하실 수 있습니다!!!

* 크로스 브라우징. ch 는 IE9 부터 지원되기 때문에 한국에서도 거의 모든 경우 맘놓고 쓰실 수 있습니다.

http://caniuse.com/#feat=ch-unit

자, 이제 한국어 캐릭 자르기는 완전 정복 했습니다. 동의 하시죠? codei bastcode (자신이 세계 최강의 코더라고 하시니 그렇게 불러드립니다. ㅋㅋㅋ) 님이 말씀하신데로 “예술적인 코딩” 을 안하셔도 됩니다. 그냥 ch 쓰시면 됩니다. 오케이? ㅎㅎ


이제 한글 캐릭 자르기 문제가 해결되었으니 이걸 maintainable 한 코드로 바꿔줘야겠죠? 글자수 가 항상 같을 수가 없으니까요.

바로 이런 경우 css 의 variable 이 위력을 발휘하게 되는 것 입니다. 재미있게도 css var 에 관한 설명을 잘해놓은 사이트는 자스 사이트라는. ㅋㅋㅋ

http://www.javascriptkit.com/dhtmltutors/css-variables-tutorial.shtml

그리고 저 사이트에서 보고 배운데로 짠 저의 css var.

.typing2{ width: calc(var(--length) * 2ch); } // 한글이니까 1ch 가 아닌 2ch

*calc() 는 css 계산기 입니다. + – * 용도로 쓰이는. (position: fixed 된 element 중앙정렬할때 아주 편합니다.) IE9 부터 지원됩니다.

아, 여기서 약간의 자스 도움이 필요하긴 한데, 아주 간단합니다.
querySelector/all 로 .typing#2 를 찝어준후 textContent.length 찍어주면 됩니다.

var length = element.textContent.length;

(es6는 var ->let, 알아서 바꾸시구요)

그리고 setPropery 를 –length 로 잡아주면 끝!!

아침먹으라고 울 와이프 계속 부름. ^^;;;;

=3=3=3=3

아오.. ‘나는 css 도 모르고 js 도 모르고 지금 이게 무슨 소리인지 하나도 모르겠네.’ 라고 느끼시는 분들.

Keep calm & use the plugin.

침착하시고 플러그인을 쓰시면 됩니다. ㅎㅎㅎ

http://www.mattboldt.com/demos/typed-js/

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , ,

카테고리: , ,

Ω

5 Comments

  • bastcode says:

    일반 string 으로는 안되고 mb_substr() 으로는 utf8 이든 euckr 이든 구분해서 1단어도 계산해서 잘라줍니다.
    utf8 3바이트 체계에서는 일반 str 으로 잘라버리면 3바이트를 2바이트로 계산해서 1바이트 만큼 쓰레기 값을 보여줌으로서 문자가 깨지게 됩니다. ㅋㅋㅋ

    그런데 ch 라는 개념은 참 신박 하군요 ㅎㅎ
    그런데 영문 + 한글 조합이라는 음모와, IE8 이라는 거대한 악이 아직 존재합니다 ㅜㅜ

    • Matthew says:

      하… IE8. 아직도 한국에서는 IE8 지원을 해야 하나요? 이런데 무슨 es6? ㅋㅋㅋ

      영문 + 한글 조합은,

      영문하고 한글 섞어 쓰면 안돼요!! 빼에엑!!! 이러면 해결 됩니다. ㅋㅋㅋㅋ

      가 아니고, 자스 로직은

      if non ascii, *2, join

      이렇게 하면 될 것 같은데, 제가 쓸일이 없어서 + 와이프가 밥먹으러 오라고 막 불러서 스크립팅 해볼 시간이 없었습니다. ^^;;

      그래서 황급하게 글을 끝낸.

      • bastcode says:

        어? 안돼는데요?
        혹시 브라우저가 무엇인가요?
        브라우저가 뭐죠?
        그… 인터넷 하는 거요. 그럼 혹시 운영체제가…
        운영체제요? i7 이요~
        아니 그… 그러니깐… 윈도우 뭐 쓰시냐구요. 내 컴퓨터에 마우스 오른쪽으로…
        잠시만요… 음… 아 xp 라고 되어있는데요?
        혹시 인터넷 버전 확인 가능 하신지?
        확인이요? 어떻게요?
        그… 동그란 톱니 모양에… 예예. 뭐라고 되어있나요?
        인터넷… 8 이요.
        고객님 IE8에서는 지원 안됩니다.
        왜 안돼요? 지금 저 무시하는 거에요? 빼애애애애액!

        놀랍죠?
        근데 실화 입니다. ㅋㅋㅋ

  • Estoque says:

    타이핑 효과 신기하네요 ㄷㄷ
    CSS는 아니고 예전에 AE 쓸때 타이프 라이팅 효과 쓰려고 열심히 스크립트 작성할때가 생각납니다.
    AE에서도 문장길이를 계산하는 방식이었는데 CSS도 크게 다르지 않네요

    • Matthew says:

      Estoque 님이 조금더 나이가 많아서 플래시를 해볼 기회가 있었다면 javascript 와 css animation 을 훨씬더 쉽게 배우실 기회가 있으셨을거에요.

      왜냐하면 css animation 은 플래시의 tween 개념을 그대로 가져온거거든요. 어떤 기법이나 기술들은 항상 돌고 도는거죠. ㅎㅎㅎ

Leave a Reply

Your email address will not be published. Required fields are marked *