본문 바로가기
펜타그램이 디자인한 야후의 새로운 로고 우리에게는 잊혀진 브랜드이지만, 실제 야후는 미국에서 계속 운영되고 있는 서비스이며 실제로 트래픽도 적지 않게 발생하는 생존(?)하고 있는 서비스입니다. 하지만 전반적으로 하향세를 그리는 혹은 노인들만이 주로 찾는 서비스와 같은 부정적인 이미지들이 있었는데, 이를 타개하기 위해 경영자도 바꾸고 다양한 기업들도 인수하고(텀블러, 플리커 등) 했지만 기대했던 만큼의 큰 변화는 없었던 것 같습니다. 그러던 와중 야후의 브랜드 리디자인 소식이 들려 왔는데요, 영국의 글로벌 디자인스튜디오인 펜타그램에서 작업했다고 합니다. 이 변화가 야후의 새로운 변화를 리드할 수 있을지 주목해 봐야할 것 같습니다. Pentagram Pentagram 펜타그램의 소개를 보면, 최근 다른 로고들의 추세와 같게 다양한 플랫폼과 환경에..
[AI] Bounding Box가 계속 표시되는 버그 대응 방법 (내용수정) 환경을 특정할 수는 없지만, 개인적 경험에 의하면 CMYK 컬러모드로 작업을 하는 중간에 특정 개체를 선택했을 때 표시되는 bounding box가 선택을 해제한 이후에도 지속적으로 표시되는 버그가 일러스트레이터 상에서는 간간히 발생한다. 실제 개체가 선택되는 것은 아니기에 무시하고 진행할 수도 있지만, 필자는 일반적으로 일러스트레이터를 종료하고 다시 실행하는 식으로 문제를 해결하곤 했다. 하지만 여기에는 더 쉬운 방법이 있다. 단순히 'Preview Bounds' 기능을 끄고 켜는 것만으로 해당 버그에 대한 대응이 가능하다. 꽤 오래 전부터 존재했던 버그인데 2019 버전까지 버그가 유지되고 있으니, 해당 버그를 맞닥뜨렸을 때 이 방법을 통해 문제를 해소하기를 권장한다. 'Preview Bounds'를..
17년 12월 웹개발모임 포스터디자인 - 2017년 작업 - 일러스트레이터 활용
CSS 기본 시스템 폰트 설정 (2019) 각 운영체제 별로 기본 시스템 폰트를 로드하는 CSS 코드. 영문 시스템 폰트를 로드하는 것을 기본으로 되어 있기에 특정 국가에 대한 폰트 설정을 목표로 한다면, 폰트 리스트를 추가적/구체적으로 정의해줄 필요가 있다. 운영체제가 업그레이드되면서 기본 시스템 폰트가 변경되는 경우가 있기 때문에, 이 경우에도 새로운 폰트로 정의하는 작업이 필요하다. CSS 코드 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; ..
CSS 리셋 - Normalize.css & Reset.css Normalize 또는 Reset이라고 불리우는, 다양한 브라우저의 기본 설정을 일반적으로 사용되는 스타일로 '초기화'하는 역할을 하는 라이브러리에 대한 소개를 하고자 한다. Normalize를 기반으로 다양한 파생 버전이 등장하고 있다. 대표적인 것이 부트스트랩의 Reboot이 있다. Normalize는 최소한의 리세팅만 제공하므로, 조금 더 편의성이 높은 라이브러리를 찾는다면 좋은 선택이 아닐 수 있다. 다만 미니멀한 코딩이 우선시된다면 Normalize.css를 세팅하고 이를 지속적으로 업그레이드받는 것이(브라우저가 지속적으로 변하듯 이에 대한 Normalize.css도 지속적으로 업데이트되고 있다) 좋은 방법일 수 있다. 좀 더 어드밴스드한 리세팅 옵션을 설정하고 싶다면, 유명 프레..
CSS box-sizing과 초기 설정(border-box) border-box로 설정하는 것이 일반적으로 css로 스타일링을 하는데 있어서 관행으로 여겨진다. 다만 매우 널리 적용되는 방식인데도 불구하고 표준 resetter라고 볼 수 있는 Nomarlize.css에는 이 부분이 포함되지 않은 것을 확인되는데, 이는 말 그대로 최소한의 항목에 대해서는 속성을 resetting하려는 제작자의 의도인 것으로 보인다. box-sizing 속성을 이해하기 위해서는 기본 CSS Box Model에 대한 이해가 필요하다. border-box로 box-sizing을 설정하는 과정은 box model의 padding, margin, border를 개체 안에서 할당하는 과정이라고 볼 수 있다. 기존 개체의 크기가 변화하지 않는 것이 특징이다. The Beginner's Guid..
CSS clip 속성 clip 이미지나 도형 등을 클립핑할 때 사용. IE8도 지원. 클리핑 효과를 주기 위해서는 속성을 부여하는 개체의 position 속성이 absolute여야 한다. clip 속성은 사각형을 통한 클리핑한 지원하나, 새로운 속성인 clip-path는 다양한 도형을 통한 클리핑을 지원 예정이라고 한다. rect가 받는 인자는 마스킹되는 영역을 정의하는 것으로 (top, right, bottom, left)로 정의된다. CSS만을 활용해서 도넛 그래프 등을 만들 때 유용하게 쓰일 수 있다. img { position: absolute; clip: rect(0px,60px,200px,0px); } clip-path IE12부터 지원하며, 사각형 외 다양한 도형으로 통한 클리핑 가능 참고자료 CSS clip p..
var() - CSS 변수(Variables), 커스텀 프로퍼티 CSS variable이라고도 불리움. 말 그대로 값을 저장하는 변수를 지정할 수 있음. var(--header-color, blue); Sass의 변수와의 차이 Sass의 변수와 달리 CSS 자체 지원 속성이기 때문에 인라인 스타일 코드를 통해서 동적으로 값을 변환하는 것이 가능하다. :root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } 다만 IE에서 지원하지 않는다. 참고자료 var() Semi Circle Donut Charts