본문 바로가기
CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기 (내용수정, 2020-04-21) em의 수치가 %와 비슷하게 작동한다는 내용 추가 타이포그래피라는 단어가 영어라는 점에서 알 수 있듯 기본적인 이론과 기술의 근원이 영어 즉, 라틴문자를 중심으로 구성이 되어 있습니다. 하지만 한글은 기본적으로 영어와는 전혀 다른 특성을 가지고 있는 글자체계이기 때문에 적용 기술이 영어를 대상으로 하는 것과는 달라야 합니다. 그 중에 특히 차이가 심한 요소가 자간입니다. 한글 웹폰트의 자간 웹폰트를 떠나서 대부분 한글 디지털타입페이스는 자간이 다소 넓습니다. 글자 요소별 kerning이 이루어져 있는 영어와 달리 기술적 제약이 있는 것인지 모르겠지만, 대부분의 디지털타입페이스가 그러합니다. 그래서 한글의 경우 자간조정이 거의 필수적으로 이루어지는 경우가 많습니다. CSS..
기계식 키보드 키크론 K2 Keychron K2 갈축 모델 리뷰 최근 한국에 정식 발매 소식이 있었던 키크론 K2 모델에 대한 리뷰를 진행해 볼까 합니다. 기계식 키보드에 대한 조예가 높은 편은 아닌 편으로, 디자이너 겸 개발자 입장에서 느낌을 적어 보고자 합니다. 사진이나 관련 전문적인 리뷰는 다른 매체에 이미 많이 소개가 되었을 것이라고 생각되어 저는 제 개인적인 소회와 동영상 리뷰로 글을 작성하고자 합니다. 화이트백라이트모델 저는 RGB가 아닌 화이트LED 모델을 구입했는데, 그 이유는 언뜻 RGB컬러가 형형색색 빛나는 것이 조금 촌스럽지 않을까라고 생각했기 때문입니다. 저는 화이트 백라이트에도 충분히 만족하고 있기는 하지만, 막상 사용하고나니 조금 밋밋한 화이트백라이트의 느낌에 RGB컬러로 구매할걸이라는 약간의 아쉬움이 들기도 합니다. 다시 구매하라고 하면 만..
[일러] 여러 아트보드들을 PDF로 쉽게 고화질로 익스포트하기 일러스트레이터를 통해 PDF산출물을 만드는 경우는 매우 많습니다. Save as를 통해서 AI 파일 자체를 PDF로 저장하는 것도 방법이고, 실제로 '인쇄' 작업 등에 있어서는 이 방법이 더 효율적일 수 있습니다. 다만 일부 아트보드들만 선택해서 저장하고 싶은 경우, 그리고 별도의 파일 생성 없이 PDF 익스포팅을 원하는 경우에는 'File > Export > Export for Screens' 메뉴에서 파일 포맷을 PDF로 선택한 후 익스포팅을 진행하면 됩니다. 화면에서 볼 수 있듯이 전체 아트보드 또는 일부 아트보드만 선택하여 익스포팅을 선택할 수 있습니다. 다만 기본 셋팅값이 저화질로 설정이 되어 있기 때문에 관련 버튼 옆에 있는 설정 버튼을 눌러서 품질을 고화질로 선택한 후 진행하면 고품질의 PD..
어피니티디자이너 Expand Stroke 문제 대응하기 어피니티디자이너는 저렴한 가격에 일러스트레이터와 포토샵을 함께 커버할 수 있을 정도의 기능성을 보여주며, 동시에 아이패드에서도 호환이 가능하는 등 다양한 장점을 보유하고 있는 그래픽소프트웨어입니다. 다만 한 가지 지나치게 치명적인 단점이 있는 바로 Expand Stroke 기능이 작동하지 않는다는 것입니다. 벡터그래픽소프트웨어가 이럴 수 있나 싶긴 하지만, Expand Stroke 버그는 오랫동안 어피니티디자이너에 있어 왔고, 어떠한 이유에서인지 개발팀은 해당 버그를 해결하지 못하고 있습니다. 버그 내용은 다음과 같습니다. Expand Stroke가 이상하게 적용되는 문제 위 이미지처럼 straight한 path 또는 shape을 Expand Stroke 했을 때 형상이 구겨지면서 적용되는 문제가 바로 ..
어피니티디자이너 Synchronise Default 및 Revert Default 기능 안내 어피니티디자이너의 메인 인터페이스를 보다 보면 상단에 다소 생경한 커맨드가 있는 걸 확인할 수 있습니다. 바로 Syncrhonise Default From Selection이라는 이름의 아이콘과 Revert Default라는 이름의 아이콘이 그것입니다. 이것은 간단하게 기본값으로 설정되는 전경색, 배경색, 브러쉬 종류, 브러쉬 굵기 등을 설정할 수 있게 해 주는 것입니다. Syncrhonize Default를 누르면 브러쉬가 활성화된 상태였다면 현재 설정된 브러쉬와 색상 값이 기본값이 됩니다. Revert Default는 다른 브러쉬와 색상 등을 사용하다가 기본값으로 되돌아가고 싶을 때 누르면 됩니다. 이 기본값의 설정은 모든 메뉴에 대해서 각각 지정이 가능합니다. 예를 들어 문자 메뉴가 활성화된 상태에..
어피니티디자이너에서 Shift 락 해제하기 누가 먼저 시작한 것인지는 알 수 없지만, 언제부턴가 그래픽 소프트웨어들이 개체에 대한 정비율 리사이징을 기본값으로 설정하는 현상이 많아지고 있습니다. 이는 기존의 쉬프트키를 눌러서 비율을 콘스트레인하는 방식에 큰 변화를 준 것이라고도 볼 수 있는데요. 개인적으로는 이 상황이 혼란스러울 때가 굉장히 많습니다. 이게 일괄적으로 모든 소프트웨어가 이렇게 변한 것이 아니기도 하거니와 소프트웨어 내부적으로도 그 적용 기준이 모호하기 때문입니다. 이게 가장 혼란스러운 소프트웨어는 애증의 포토샵입니다. 스마트오브젝트 중 일부는 쉬프트 컨스트레인이 걸려있고, 어떤 건 안 걸려 있고... 혼란스럽기 짝이 없습니다. 어피니티디자이너도 이 컨스트레인락이 기본 옵션으로 설정되어 있긴 합니다만, 포토샵의 그것보다는 일관성이 ..
피그마(Figma) 기능 - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기 일반적으로 개체의 선, 폰트크기, 둥글기를 유지한 채로 사이즈를 조정하는 옵션은 Scaling stroke, radius, and font size와 같은 용어로 옵션에서 선택이 가능합니다. 이는 스케치와 일러스트레이터, 포토샵에서 모두 확인할 수 있는 옵션입니다. 다만 피그마의 경우와 이러한 옵션을 현재로서는 별도로 제공해 주지 않습니다(2019-10). 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해서는 일반 트랜스포밍이 아닌 'Scale'이라는 별도 메뉴를 통해서 이를 진행해야 합니다. 이 메뉴는 'k'를 통해 접근 가능하며, 또는 무브 툴 하위에 서브메뉴로서 선택할 수도 있습니다. 위 그림에서 보시는 것과 같이 '스케일' 메뉴를 통해서 리사이징..
아이프레임(iframe) 높이 자동으로 맞추기 아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다. 다만 아래 방법들은 같은 도메인 또는 같은 서버 안에 소스들이 있을 때만 유효합니다. 다른 도메인이나 서버에 있는 소스들을 iFrame을 불러오고 이에 자바스크립트를 적용하는 과정에는 별도 리서치가 필요합니다. 방법1 : JS 코드 이 방법은 같은 서버 내에서 페이지를 로드할 때 유효한 것으로 보입니다. 자료출처 : Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate] 방법2 : jQuery 플러그인 이..