구구

커피 맥주 '처세술' 제작기(2/4)

구구 — Tue, 31 Mar 2020 13:11:16 GMT

주류를 디자인할 때에는 제일 어렵고 생소한 부분은 상표 또는 용기 표시사항이에요. 아마, 처음 주류를 디자인하는 분에게는 가장 큰 벽으로 느껴지는 부분이라 생각합니다. 라벨의 디자인이라고 하면 앞면. 즉, 제품명을 드러내는 부분만 생각하고 표기사항 영역을 인지하지 못한 경우가 많습니다. 디자인을 다 끝냈다고 생각한 후, 표시사항과 맞닥뜨리게 되면 이런 느낌

커피 맥주 '처세술' 제작기(1/4)

구구 — Sat, 08 Feb 2020 16:10:37 GMT

혹시 맥주나 소주의 라벨, 표시사항, 병뚜껑을 자세히 들여다보신 적 있나요? 사실 술을 사랑하긴 하지만, 늘 취해 있어서 깊게 들여다본 적이 많이 없었던 것 같아요. 자세히 살펴보면 작은 영역에 정말 많은 정보가 들어가고 법적인 부분들까지 고려되어있지만, 폭이 좁고 기형적으로 길쭉한 타이포그래피만 기억에 남죠. 마치 아래 이미지처럼요. "왜 이렇게 했을

똑똑하게 스케치 사용하기 - 협업을 위한 심볼 구조화, 플러그인 활용

구구 — Tue, 06 Mar 2018 08:47:04 GMT

Sketch App 도입은 Zeplin을 활용하여 효율적으로 개발자와 소통하기 위해 시작되었습니다. 도입하는 과정에서 안드로이드 UI를 담당하게 되었고, 심볼의 구조화와 적절한 플러그인의 사용을 통한 작업의 효율, 가지고 있던 문제점들을 해결하는 것에 중점을 뒀습니다. 기존 작업방식과 문제점 디자인 작업 패턴을 분석했을 때, 기존의 PSD 파일들에

애니메이션 따라해보기 #3 - 텍스트 애니메이션과 이미지 마스킹 애니메이션을 완성해요.

구구 — Sun, 16 Apr 2017 15:27:08 GMT

이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다. 크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다. 브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다. 이 글은 CSS에 대해 어느 정도 알고 계신 분들이 보실 거라는 가정하에

애니메이션 따라해보기 #2 - 아웃라인 애니메이션을 완성해요!

구구 — Fri, 10 Feb 2017 17:52:03 GMT

애니메이션 따라해보기 #1 - 아웃라인 애니메이션을 작업해봅시다.

구구 — Mon, 30 Jan 2017 11:01:12 GMT

이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다. 크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다. 브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다. 이 글은 CSS에 대해 어느정도 알고 계신 분들이 보실 거라는 가정하에 작

애니메이션 구조 잡기 - 영상에서 볼 수 있는 애니메이션을 CSS로 옮길 수 있을까?

구구 — Sun, 22 Jan 2017 09:47:10 GMT

이번에 연재하는 글들에선 브라우저 서포트(Browser support)에 대한 내용은 자세히 다루지 않습니다. 크롬 브라우저를 기준으로 작성되었으며, IE나 타 브라우저에서 안 보이는 부분들이 생길 수 있습니다. 브라우저 서포트에 문제가 생길 수 있는 부분은 따로 표기해놓겠습니다. CSS 애니메이션에 대한 글을 연재하게 된 계기는 "영상에서 볼 수 있는

CSS Animation 퀄리티를 높여보자 - 쉽고 간단하게 퀄리티를 높여봐요.

구구 — Sun, 08 Jan 2017 10:37:40 GMT

CSS 애니메이션 작업을 할 때 어떻게 해야 퀄리티 높은 애니메이션을 만들 수 있을까요? 여러 가지 방법들이 있겠지만 가장 따라 하기 쉬운 방법에 대해 이야기를 해볼게요. 이야기하기 앞서 혹시 CSS에서 transition을 써보신 적 있으신가요? 애니메이션을 부드럽게 하기 위해 ease, ease-in, ease-out, ease-in-out를 함께 쓰

CSS Transform 속성

구구 — Mon, 26 Dec 2016 13:12:24 GMT

이번 글에서는 Transform 속성에 대해 이야기해보려 합니다. 애니메이션 속성에 대해 썼던 글과 마찬가지로, 기본적인 내용에 대해서만 다룰 예정입니다. 속성들을 조합하여 활용하는 방법에 대해선 기초를 다지는 작업 후 차근차근 발행할 예정이에요. Transform 2D 함수(functions) matrix translate translateX t

CSS Animation 속성

구구 — Sat, 03 Dec 2016 08:19:24 GMT

CSS 애니메이션과 관련된 속성들은 어떤 것들이 있을까요? 크게 두 가지로 나누자면 애니메이션 관련 속성들과 Transform 속성들이 있습니다. 이번 글에서는 애니메이션 관련 속성들에 대해 써보려고 합니다. 애니메이션 속성 animation-name animation-duration animation-timing-function animation

CSS Animation 어떻게 사용하고계신가요?

구구 — Sat, 12 Nov 2016 13:11:11 GMT

웹에서 애니메이션을 표현할 때 어떤 언어를 쓰고 계신가요? 간단한 작업은 CSS, 복잡한 작업엔 JavaScript를 쓰고 있을 것이라고 생각합니다. 간단한 작업이라 하면 버튼의 색을 바꾸는 것과 같은 UI 요소의 상태 전환을 뜻하고, 복잡한 작업은 공이 튀는 바운스 애니메이션 같은 세밀한 제어가 필요한 애니메이션을 뜻합니다. 그리고 애니메이션 기능이 포