본문 바로가기
어피니티디자이너 Expand Stroke 문제 대응하기 내용 업데이트 (2020-09-07) 2020년 09월 기준 아래에서 언급한 안정성 및 버그 이슈는 대부분 해결이 되었습니다. --- 어피니티디자이너는 저렴한 가격에 일러스트레이터와 포토샵을 함께 커버할 수 있을 정도의 기능성을 보여주며, 동시에 아이패드에서도 호환이 가능하는 등 다양한 장점을 보유하고 있는 그래픽소프트웨어입니다. 다만 한 가지 지나치게 치명적인 단점이 있는 바로 Expand Stroke 기능이 작동하지 않는다는 것입니다. 벡터그래픽소프트웨어가 이럴 수 있나 싶긴 하지만, Expand Stroke 버그는 오랫동안 어피니티디자이너에 있어 왔고, 어떠한 이유에서인지 개발팀은 해당 버그를 해결하지 못하고 있습니다. 버그 내용은 다음과 같습니다. 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 플러그인 이..
Reduced/비애니메이션 이슈/디바이스 대응 CSS 작성법 CSS 애니메이션 테스팅 in 애니메이션 저하 환경 디바이스 및 OS의 설정에서 애니메이션을 감소시키는 설정이 켜져 있는 경우가 있습니다. 이 경우 웹브라우저에도 영향을 주어 CSS 애니메이션이 일부 작동하지 않게 됩니다. 특히 opacity를 0에서 1로 바꿔서 컨텐츠를 표시하는 애니메이션을 구성한 경우, 자칫 웹사이트의 컨텐츠 자체가 표현되지 않는 문제가 발생할 수 있습니다. 특히 유명한 라이브러리 중 하나인 animate.css를 활용한 애니메이션을 구성할 때 이러한 구성이 자주 발생합니다. 이같은 문제에 대응하기 위해서는 애니메이션이 저하된 디바이스에 대응하기 위해 구성된 미디어쿼리를 설정해 주어야 합니다. 이는 다음 코드에서 확인하실 수 있습니다. 비애니메이션 대응은 단순히 특정 환경이라고 치부..
[AI] 레이어의 Appearance (스타일, 그림자) 복사/붙여넣기 방법 포토샵의 경우 레이어패널에서는 레이어스타일을 드래그함으로써 개체에 적용된 스타일이펙트를 다른 개체에 쉽게 적용할 수 있습니다. 일러스트레이터의 경우 이와 똑같이 간편하지는 않지만, 비슷하게 스타일을 복사/붙여넣기 하는 방법이 존재합니다. 이를 위해서는 레이어 패널에서 서브레이어로 존재하는 개체들을 확인할 필요가 있습니다. 이 상태에서 아래 그림과 같이 해당 레이어를 선택하는 버튼인 우측의 '동그라미' 버튼을 알트를 누른 상태에서 드래그하여 스타일을 복사/붙여넣기 하고자 하는 개체에 끌어 놓으면 됩니다. 아래 그림처럼 스트로크와 필컬러도 복사/붙여넣기가 된 것을 확인할 수 있는데, 이 외에도 그림자 및 다른 스타일 효과들도 함께 복사/붙여넣기가 됩니다.
XML사이트맵의 용도와 만드는 법 파악하기 본 포스트는 Envato Tuts+의 All you need to know about XML sitemaps라는 아티클을 기반으로 작성된 포스트입니다. XML사이트맵 용도 사이트맵이라는 용어 자체는 기본적으로 우리가 흔히 떠올리는 여러 링크들로 이루어진 사이트 전체의 구조를 나타내는 일종의 사이트 구조도라고 볼 수 있습니다. 이것은 HTML사이트맵이라고 볼 수 있으며 여기서 이야기하려는 XML사이트맵과는 다른 성질의 것입니다. XML사이트맵은 검색 크롤러가 사이트를 이해할 수 있게 도움을 주는 지도 역할을 합니다. 특히 여러 페이지로 구성된 볼륨이 큰 사이트이거나, 새롭게 오픈된 사이트같은 경우에 이러한 사이트맵이 유용하게 작용될 수 있습니다. 크롤러가 더 쉽게 정보를 취득할 수 있도록 도와주기 떄문입니..
외주/과외 문의