웹 페이지를 통해 두 가지 상품이나 서비스 이미지를 비교하거나 차이점을 강조해서 보여주고자 할 때, 일반적으로 좌.우 또는 상.하 배치를 통해 보여주거나 페이지 전환을 통해 보여주는 경우가 많다.이런 방법은 레이아웃 유지, 공간 제약, 직관성이 떨어져 효율성이 다소 떨어지는 점이 없지 않았다. 물론 다양한 방법의 diff도구들이 적용되고 있지만 보다 사용자 중심 시각적인 도구는 쉽게 접하기 어려웠다.시각적인 diff도구 TwentyTwenty는 두 이미지의 시각적인 차이를 강조하거나 효과적으로 보여주고자 할 때 유용한 방법이 될 수 있다.두 이미지의 이전과 이후를 한 화면, 특정 레이아웃에서 스와이프를 통해 직관적으로 보여준다. 두 개의 이미지를 쌓아서 동작하며, 슬라이더를 이동하면 CSS clip 속성..

Design Information/HTML5 and CSS3 2018. 5. 23. 07:41

브랜드나 서비스의 히스토리를 연도별, 월별로 한눈에 볼 수 있도록 시각화한 타임라인은 고객이나 방문자에게 쉬운 이해와 신뢰도를 높이는 데 효과적이다.최근 들어 온. 오프라인 국한하지 않고 연감(Annual)이나 웹사이트에 활용하는 사례가 많아지고 있다.특히 웹 기반 타임라인은 기업이나 단체를 비롯해 개인 포트폴리오 구성에도 활용하여 퍼스널 브랜드 가치를 높이는데 적지 않은 도움을 주고 있다.이 글을 통해 소개하는 58가지 CSS 기반 타임라인 예제들은 데모 및 코드 페이지를 통해 HTML/CSS/JS 3가지 필수 리소스를 제공하고 있어 웹에 대한 기본적인 이해도가 있는 누구든지 손쉽게 활용할 수 있다.또한, 58가지 CSS Timelines 는 구현 이미지와 더불어 가로 모드와 세로 모드를 나누어 소개하..

Design Information/Design Resources 2018. 4. 18. 19:11

이 글은 dvncan.com 운영자인 Duncan Graham이 황금비율에 대한 애착의 발로로 최근 으로 정의된 크기와 형태를 적용, 여러 가지 도형을 만들 수 있는 가능성을 제시하는 내용을 담고 있습니다. 몇 주 전, 브루클린에 있을 때 운 좋게도 스콧 캘럼(Scott Kellum)과 함께 점심을 같이 한 적이 있습니다. 그는 최근 'em'으로 정의된 크기와 'CSS' 형태를 적용하여 여러 가지 도형들을 만드는 것에 재미를 붙이고 있다고 말했습니다.나 역시 이 아이디어에 흥미를 느껴, 황금 비율(1.618033988...)과 함께 작업을 해보기 시작했습니다.(건축학을 배운 지 4년이 지났지만, 아직도 황금 비율(golden-ratio)에 대한 애착이 있습니다.)기본 모양을 만드는 것부터 시작하여, 사각..

Design News/Design Trend 2014. 1. 5. 17:35

한국어도비시스템즈는 지난 11월 16일 크리에이티브 더 웹 코리아(Creative the Web Korea)를 개최하고 디자이너와 개발자들이 HTML5, CSS3 및 JavaScript 등과 같은 최신 웹 기술을 이용해 보다 손쉽게 강력한 웹 사이트, 디지털 콘텐츠, 모바일 앱을 개발할 수 있도록 돕는 혁신적인 에지(Edge) 툴과 기법을 공개했다. 오전 커스터머 세션에 이어 오후에 미디어 세션을 가진 자리에서 어도비의 크리에이티브 솔루션 부문 아시아 태평양 지역 에벤젤리스트인 폴 버넷(Paul Burnett)이 기조연설을 통해 에지 틀 및 기법을 소개했으며, 어도비 에지 애니메이트 1.0(Adobe Edge Animate 1.0), 어도비 에지 인스펙트(Adobe Edge Inspect 1.0), 어도..

Design Information/HTML5 and CSS3 2012. 11. 18. 19:00

웹 관련 직업군(웹 기획, 웹 디자인, 모바일 웹)에 관련된 이들에게는 몇해 전부터 HTML5와 CSS3가 큰 관심사로 회자가 되고 관련된 도서는 물론 컨퍼런스들도 자주 개최되고 있다. 특히나 아이폰과 아이패드가 출시되던 시점 전 애플 CEO인 스티브잡스가 어도비 플래시 기술에 대한 반감을 표명하면서 HTML5가 미래의 웹 기술이 될 것이라고 언급하면서 일반인들도 HTML5라는 기술용어를 한 두번쯤 접하게 될 만큼 관심이 높아졌다고 볼 수 있다. 결국 지난 11월 9일 어도비는 모바일용 플래시 플레이어를 더 이상 개발하지 않겠다고 밝혔고, 안드로이드와 블랙베리 플레이북을 위한 플래시 플레이어 11.1 버전을 끝으로 모바일 플래시 개발은 하지 않게되며 HTML5와 PC용 개발에 주력할 예정이라고 밝히는 상..

Design Information/HTML5 and CSS3 2011. 11. 17. 17:23

스마트폰, 태블릿PC 시장의 급성장과 대중화로 '모바일'이란 키워드의 중요성이 모든 산업의 전략수립의 중심에 놓여 있다. 바야흐로 모바일 혁명 시대로 모바일 앱, 모바일 웹이란 단어가 들어가지 않는 곳이 없을 만큼 그 비중이 크다고 할 수 있다. 그런 까닭에 개인은 물론 기업들도 모바일 앱과 모바일 웹사이트 구축에 큰 관심을 보이며 앞다투어 제품 및 서비스 홍보를 위한 발빠른 움직임을 보이고 있다. 이런 추세이다 보니 앞으로 전망이 밝은 직업으로 모바일 앱. 웹 개발자나 디자이너 등 전문 인력시장이 급부상하고 있다. 이런 트렌드에 부응하며 모바일 코딩을 배우고자 하는 사람들이 많아지고 서점가에서도 다양한 모바일 관련 도서들이 봇물터지 듯 쏟아져 나오고 있다. 하지만 대부분 이론 중심의 두꺼운 바이블 서적..

Design Information/HTML5 and CSS3 2011. 11. 15. 12:22

어도비 일러스트레이터, HTML5 Pack 배포. 어도비시스템즈가 자사의 일러스트레이터 CS5 디자인 에디터에 개발자들이 웹 및 모바일 플랫폼에 자신들이 디자인을 그대로 내보내기 할 수 있도록 웹 형식의 HTML5 패키지를 추가했다고 밝혔다. 이러한 기능은 디자이너가 화면에 보이는 그대로를 웹페이지, 스마트폰 그리고 태블릿과 같은 멀티 플랫폼 뿐만아니라 출판물에도 손쉽게 단번에 내보내기를 통해 구축할 수 있다고 어도비 수석 제품 제품 매니저인 데이비드 메이시(David Macy)는 말했다. 어도비 HTML5 Pack은 디자인을 CSS3 뿐만아니라 HTML5 Canvas 요소와 XML 이미지 포맷인 SVG(확장 가능한 벡터그래픽)로 렌더링할 수 있다고 했다. 어도비 HTML5 Pack은 플래시 포맷의 포지..

Digital News/IT Trend 2010. 9. 15. 06:07

CSS3를 활용, 타이포그래피 삽입 방법을 설명하려고 합니다. 테이블 태그 또는 이미지를 사용하지 않고 css3를 이용하여 박스를 구현하고, 그라데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법은 아래와 같습니다. 참고로 본 예제는 Firefox3.6, Safari 4.0 이상에서 직접 확인할 수 있으며, IE8.0에서 CSS3 이 구현되지 않아 확인이 불가하기에 위의 첨부이미지로 실 적용효과를 대체합니다. CSS3 정의. #insetBgd { width: 500px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top,..

Design Information/HTML5 and CSS3 2010. 3. 22. 00:44