본문 바로가기

CSS

(6)
오늘 배워 바로 쓰는 CSS 애니메이션 프로토타이핑 Framer, Flinto, Origami, Invision. 많은 프로토타이핑 도구가 존재합니다. 디자인에 활력을 불어넣고 개발팀과의 커뮤니케이션을 위해 필수라고 하는 프로토타이핑. 어떻게 하기는 해야겠는데 어려운 도구나 코드를 공부하기엔 시간이 없고, 막상 열심히 공부하면 새로운 버전이 나오고, 더 좋은 도구가 나오고. 이런 경험을 많이 하셨을 겁니다. 프로토타이핑 도구로 멋지고 완결된 시나리오를 가진 결과물을 만들 수도 있습니다. 하지만 우리에게 당장 필요한 것은 지금 당장 떠오르는 아이디어를 보여줄 수 있는 아이콘의 간단한 모션, 쓱 움직이는 화면 전환 같은 것이 아닐까요? 오늘 배워서 바로 쓸 수 있는, CSS 애니메이션으로 하는 간단한 프로토타이핑 방법을 소개합니다. &a..
스타일 가이드 작성하기 들어가며 지난 글, “스타일 가이드로 웹서비스 개발하기”를 통해 스타일 가이드가 무엇인지, 그리고 웹서비스 개발에 스타일 가이드가 얼마나 중요한지 알아보았습니다. 스타일가이드는 단순히 디자인과 프론트엔드 개발의 참고안이 아닌, 서비스와 함께 성장하는 역할을 합니다. 서비스의 운영과 함께 지속적으로 업데이트되며 성장합니다. 사용자에게 일관된 사용자 경험을 전달하기 위해 UI의 통일성과 확장성은 필수적입니다. 스타일 가이드는 이를 체계적이고 쉽게 할 수 있도록 도와줍니다. 또한, 점점 비대해지는 서비스의 뿌리 역할을 합니다. 이번에는 스타일 가이드를 실제로 어떻게 작성하고 유지해가야 하는지 알아보겠습니다. 어떻게 시작할까 하얀 캔버스 위, 비어있는 텍스트 에디터를 보면 난감합니다. 무엇을 만들지 먼저 고민해..
타이포그래피, 웹에서 어떻게 활용할까? 웹사이트의 95%는 텍스트로 이루어져 있다고 합니다. 여러분이 읽고있는 이 글 또한 웹에 적용된 타이포그래피라고 할 수 있을텐데요, 사이트 방문자가 콘텐츠를 잘 읽고 목적지를 쉽게 찾아갈 수 있도록 하는 웹에서의 타이포그래피는 인쇄물에서의 그것보다 더 중요하다고 해도 과언이 아닐 것입니다. 웹 디자이너가 적용할 수 있는 웹 타이포그래피 요소와 디자인 팁을 소개합니다. 다양한 폰트의 선택, 미세한 활자의 조정이 가능해 디자이너의 창의성을 발휘할 수 있는 인쇄 작업과는 달리 웹에서 완벽한 타이포그래피를 구현하기에는 한계가 있습니다. 그럼에도 불구하고, 다양한 스타일의 웹폰트와 CSS의 출연으로 그래픽툴을 이용하지 않고도 웹상에서 훌륭한 타이포그래피를 구현할 수 있게 되었습니다. 웹에서 좋은 타이포그래피를 구..
웹디자인에서 자간, 행간에 대한 고찰 디자이너와 개발자는 너무 다릅니다. 여러 가지 이유가 있겠지만, 작업 방식부터 다르기 때문이라고 생각합니다. 실제로 웹 개발실에서 일하면서도 많이 경험할 수 있었는데요. 그중 가장 문제가 많이 생기는 부분이 폰트라고 생각합니다. 서체의 경우, OS, 브라우저의 렌더링 스타일이나 유료폰트 구매 문제로 귀결됩니다. 하지만 자간과 행간은 맞출 수 있음에도, 디자이너분들과 소통하지 못했습니다. 저는 디자인을 전공했지만, 디자인을 정확하게 구현하고 싶은 마음에 개발을 시작했습니다. 하지만 초심과 다르게, 효율을 중시한 나머지 자간과 행간을 간과하는 경우가 많았습니다. 이 부분이 문제 제기되어 방법을 모색하게 되었는데요. 그 내용을 공유합니다. 여담이지만 디자인과 출신인 저도 자간, 행간에 대한 감각이 형편 없습니..
gif로 이해하는 css 포지션의 개념 저는 요즘 사내에서 ‘야매코딩’이라는 스터디를 진행하고 있는데요. css에서 ‘포지션(position)’을 제대로 설명 못 해서 애먹었던 적이 있습니다. 적당히 이해하고 넘어가기에는 아주 중요한 요소인데요. 프룬트 블로그(FROONT BLOG)에서는 포지션의 개념을 gif로 쉽게 설명했습니다. 포지션의 개념이 어려운 분들을 위해 공유합니다. 웹 디자인의 포지션 웹디자인에서 ‘포지션(position)’은 매우 중요합니다. 당연한 얘기지만 포토샵이나 일러스트레이터에서의 캔버스와는 다릅니다. 왜냐면 스크롤이나 스크린 크기 등 여러 가지 요인이 작용하기 때문이죠. 포지션은 크게 ‘스태틱(static)’. ‘앱솔루트(absolute)’, ‘렐러티브(relative)’, ‘픽스드(fixed)’로 나뉩니다. 실제 영..
짤방으로 이해하는 웹 디자인의 역사 웹 디자인의 역사는 어떻게 발전해왔을까요? 전에 반응형 웹 디자인을 짤방으로 설명했던 산디스 씨(Sandijs Ruluks)가, 이번에는 웹 디자인의 역사를 짤방으로 간단하게 정리했는데요. 그는 웹 디자이너들이 '디자이너가 개발을 배워야 하는가?' 논하기 전에, 웹 디자인의 역사에 대해 알 필요가 있다고 생각해서 이 글을 썼습니다. 1. 웹 디자인의 암흑기 웹 디자인의 초창기는 매우 어두웠습니다. 검은색화면에 단색의 글씨만 존재했지요. 디자인이라고 할 수 있는 것은 특수문자와 탭키를 이용한 것이 전부였습니다. 2. 테이블 - 웹 디자인의 시작 브라우저가 생기고 이미지를 올릴 수 있으면서웹 디자인이 시작되었습니다. 그리고 테이블을 통해 정보를 구성할 수 있었는데요. 하지만 사람들은 레이아웃을 잡기 위해 테..