프로필 사진
Sojin Park
Frontend Dev

2018년 맞이 블로그 새단장
2018. 3. 30.

1522377367318

안녕, 새 디자인! 2년 전, 무려 내가 새내기일 때 만들어서 계속 써 왔던 블로그 스킨을 최근 디자인 트렌드에 맞게 깔끔하게 손보아 다시 만들었다. 사실 보이는 부분은 많이 바뀌었지만 기능이나 개발 방법론은 크게 바뀌지 않았다. 바꿔 보려고 노력은 했지만, 사실 이런 블로그 스킨 제작과 같은 부분에 있어서는 새 기술을 도입하기에도 쉽지 않다. 최근 사람들이 많이 쓰는 React나 Vue.js, 그리고 함께 나오는 CSS 모듈 등은 이런 정적 페이지를 위한 것은 아니기에 옛날 기술을 써야 하는 것 같다. 그래서 이번에는 간단한 CSS3 애니메이션이나 SVG 파일 제작과 같은 사소한 것 선에서 새로운 기술을 도입해 보았다.

CSS3 애니메이션을 만져 보면서 느끼는 것이 정말 옛날 jQuery 애니메이션 시절과는 비교 불가하게 편해졌다는 것이 체감된다. 키프레임을 몇 개 설정해서 그 사이의 이동 속도를 큐빅 베지에(Cubic-bezier) 값으로 나타내면 끝. 이번에는 배경의 회전 효과나 버튼의 마우스 접근 시 확대 효과까지만 구현해 보았는데 더 노력한다면 깜짝 놀랄 만큼 페이지가 주는 피드백을 향상시킬 수 있겠구나는 생각이 들었다.

본문 및 제목의 글꼴도 고딕(Sans-serif) 계열에서 명조(Serif) 계열로 바꾸었다. 예전에는 명조 계열의 글꼴을 웹 페이지에 도입하는 것에 대해 굉장히 부정적이었다. 활자 매체에서야 긴 글을 읽을 때 명조 계열이 고딕 계열보다 훨씬 눈이 편하고 빨리 읽히지만, 화면에서 명조는 모니터의 떨어지는 해상도로 인해 읽기 매우 힘들었기 때문이다. 10포인트로 된 글씨는 저해상도 모니터에서 궁서체는 물론이고 바탕체도 굴림체과 같은 서체보다 읽기 힘들었다. 아마 아직까지 네이버 등에서 굴림을 채택하고 있는 이유도 이것에 기인하고 있지 않나 싶다.

그러나 최근 글 배포 플랫폼인 Medium이나 각종 블로그의 글을 읽으면서 꼭 그렇지만은 않다는 생각이 들었다. 우선 요즘 모두가 들고 다니는 스마트폰은 250ppi 이상의 고해상도 화면을 탑재하고 있다. 또한 최근에는 노트북이나 모니터, 올인원 PC도 스마트폰 수준의 선명한 화면을 보여주기도 한다. 경우에 따라선 27인치 모니터도 5K를 지원하기도 하니까... (물론 아직 저가 모니터 등에서는 멀었다, 그 쪽은 명암 구분이 제대로 안 돼서 회색과 흰색이 구분 안 되는 경우도 많다)

내가 생각을 바꾸게 된 무엇보다 큰 계기는 최근 디자인 트렌드의 변화이다. 정보를 제시할 때 조밀하고 빽빽하게보다는 여유 있고 큼직하게 나타내는 것을 중요시하고 있어서, 글자 크기가 커짐에 따라 저해상도 화면에서도 명조 글씨체의 삐침을 살리고 읽기 힘든 점이 많이 없어졌다. 그래서 Noto Sans CJK(본고딕)에 이어서 나온 Noto Serif CJK(본명조) 글꼴을 글을 표시하는 서체로 채택해 보기로 했다. 결과는 꽤 만족스럽고, 보기에도 훨씬 나은 것 같다. 그런 의미에서 최근 한국에서 유행하는 브런치와 같은 서비스는 왜 아직도 읽기 힘든 작은 고딕을 고집하고 있는지 잘 모르겠다. 심지어 웹 폰트마저 사용하고 있는데!

블로그를 새로 단장하면서 느낀 점이 한 가지가 있다. 이 작은 블로그를 약간 바꾸는 것에도 이렇게 오랜 시간이 걸리는데, 네이버나 구글과 같은 큰 회사의 경우 새로 디자인을 바꾸는 데 얼마나 시간이 걸릴지... 사소한 것 같지만 엄청난 귀차니즘을 뚫어야만 이루어낼 수 있는 경지인 것 같다. 그렇기에 디자이너와 프론트엔드 엔지니어들에게 경례를 표한다. 이번에 네이버의 2018년 평창 동계올림픽 대회 특집 페이지를 보면서 이걸 어떻게 직접 만들었을까 하는 생각이 들었다. 무엇인가 마우스로 쉽게 작업할 수 있는 시각적 툴이 있는 것일까?

그러면 오랜만에 올리는 블로그 글이니까 근황. 최근 이 프론트엔드 쪽에서는 잘 작업하지 않고(동아리에서 작은 세미나 하나만 진행하고 있다) 오히려 Scala나 Haskell과 같은 함수형 언어를 더 파거나 Rust와 같은 시스템 프로그래밍 언어를 공부하고 있다. 이 언어들을 쓰면서 느끼는 점은, 이 세상에 있는 수많은 프로그래밍 언어, 특히 최신 프로그래밍 언어는 람다 대수를 기반으로 한 함수형(Functional) 부분과 상태에 기반한 절차적(Imperative) 부분이 있구나라는 점이다. 그리고 하나 더 느끼는 점은 상태에 기반한 절차적 프로그래밍이 생각보다 결함이 많다는 것이다. 사실 지금까지의 프로그래밍 경험을 되짚어 보면 참조 투명성(Referential transparency)을 지키지 않거나 가변 객체(Mutable object)을 사용하기 때문에 필연적으로 발생하는 문제들이 많았다. 이러한 것들은 절차적으로 코드를 짠다면 반드시 발생하는 부분이기에, 절차적 프로그래밍이나 그것이 발전한 객체지향 프로그래밍은 성능의 중요성을 앞세워 프로그래머로 하여금 문제가 쉽게 발생할 수 있는 환경을 만들고 있다는 생각이 들었다. 조금 더 공부를 해 봐야 알겠지만, 읽기 쉽고 유지보수가 편한 코드를 작성하려면 가급적 참조 투명성이나 고차 함수, 불변 객체를 중심으로 한 프로그래밍을 해야겠다는 생각이 든다.

제목 옆의 큰 이미지는 어제 하동관에서 곰탕을 먹는 나이다. 명동 하동관에 불이 나는 바람에 (개충격, 어째서 불이 난 것일까?) 어쩔 수 없이 여의도 하동관을 방문했다. 맛은 거의 같았고 정말이지 곰탕은 이런 것이라는 생각이 들게 하는 맛이다. 곰탕과 평양냉면은 포기할 수 없는 한국의 맛인 듯 하다. 오늘도 이제 열심히 살아야지!