웹디자인은 다른 디자인 분야와 달리 다양한 리소스가 소요된다. 그러한 까닭에 프로젝트 초기에 리서칭을 통한 리소스 확보에 드는 시간과 비용이 많은 경우가 있다. 일부 센스있는 웹디자이너와 개발자라면 자신만의 리소스 디렉토리를 구성해 놓고 활용하는 사례도 있다. 이 글을 통해서 소개하는 완벽한 웹 개발 도구 찾기가 가능한 웹디자인 툴박스는 한마디로 웹디자인 및 웹 개발 리소스 포털이라고 해도 부족함이 없을 아주 유익한 웹서비스다. 웹디자인 툴박스(Webdesign Toolbox)는 사람이 선별한 웹 디자인 리소스 모음이다. 웹 디자이너, 개발자 및 전략가를 위한 최고의 웹 디자인 앱, 도구 및 기타 리소스를 제공한다. 웹디자인 툴박스(Webdesign Toolbox)는 사용자가 웹 디자인 리소스 선택 범위..

Design Information/Design Resources 2020. 12. 27. 10:44

이미지는 웹 사이트를 매력적이고 시각적으로 돋보이게 만드는 데 많은 도움이 된다. 그러나 대체 텍스트('Alt Text' 또는 'Alt Tag')로 이미지를 최적화하지 않으면 사이트의 사용자 경험과 접근성을 향상시킬 수 있는 중요한 기회를 놓치기 된다.웹사이트 내 이미지를 올바르게 사용하려면 먼저 대체 텍스트(Alt Tag)가 무엇인지 이해하는 것이 중요하다. 이 글을 통해서 Alt Tag가 무엇이며 왜 사용되는지 설명한다. 또한 그에 대한 모범 사례를 소개한다. Alt 태그란 무엇인가? 대체 텍스트(Alt Tag)는 HTML의 이미지에 추가되어 웹페이지의 내용과 컨텍스트를 설명한다. 미디어 파일을 제대로 로드하지 못해 표시할 수 없는 경우 대체 텍스트(Alt Tag)가 이미지 컨테이너에 나타난다. 대체..

Digital News/IT Trend 2020. 7. 10. 15:59

로렘 픽숨(Lorem Picsum)은 이미지를 활용하는 자리 표시자로 웹디자인 시안 기획 시 또는 웹, 모바일 UI 디자인 등에서 활용할 수 있는 유용한 기능이다.최종 확정되지 않은 이미지 영역을 설명하기 위해 이미지 표시자를 설정하고 빈 공간을 보여주는 대신 임의의 이미지를 규격에 맞게 불러와 보여 주기 위해 사용자 정의할 수 있는 방법이다. 사용 방법은 다음과 같다. URL 뒤에 원하는 이미지 크기(가로 및 세로)를 추가하면 임의의 이미지가 표시된다.예시) https://picsum.photos/200/300 정사각형 이미지를 얻으려면 크기를 추가한다.예시) https://picsum.photos/200 특정 이미지(Specific Image) [/id/{image}] | URL의 시작 부분에 추가하..

Design Information/Design Resources 2019. 5. 25. 15:05

디지털화의 끊임없는 성장은 지금에 머물러 있으며 2019년은 그다지 다르지 않을 것입니다. 올해는 사용자의 관심을 끌고 기업의 경쟁력 유지에 도움이 되는 몇 가지 웹 사이트 디자인 트렌드가 예상됩니다. 예전처럼 미학과 기술의 통합이 더 커질 것입니다. 2019년을 정의할 웹 디자인 트렌드(Web Design Trends)에 대해 알아보겠습니다. 망가진 그리드와 비대칭 레이아웃(Broken grids and asymmetrical layouts) 그리드 기반 디자인이 지금까지 룰이 되어 자리를 지키고 있었다면, 2019년의 웹 디자인은 박스 외부를 바라보고 경계를 넓히는 것에 관한 될 것입니다. 즉, 웹 디자이너는 비대칭 패턴을 배치하여 표준 템플릿에서 벗어나려고 합니다. 여기에는 특이한 게재 위치, 텍스..

Design News/Design Trend 2019. 4. 19. 13:09

복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 CSS Grid Layout 생성기 활용 방법을 살펴보자.모든 디자인 영역에서 그리드 시스템은 중요한 역할을 담당하고 있고 웹디자인에 있어서 그 비중은 더 크다고 볼 수 있다. 그리드는 수평과 수직으로 구성된 디자인의 기본 요소라고 할 수 있다.그리드는 디자인 작업에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 갖추는 데 도움이 된다. 또한, CSS CLASS를 활용해서 웹페이지 레이아웃을 구축하는 행과 열을 제어할 수 있고 그것을 토대로 복잡한 중첩 레이아웃도 어렵지 않게 구축할 수 있다. 이글을 통해 소개하는 css-grid-layout-generator는 기존에 선보인 다양한 그리드 생성기와 달리 더 직관적이고 시각적인 인터페이스로..

Design Information/HTML5 and CSS3 2019. 1. 21. 02:55

최근 흥미롭고 특이한 텍스트 및 레이아웃 효과를 만들기 위해 'shape-outside' CSS 속성을 사용하는 데모가 부각되고 있다. 참고할 만한 사례로는 Mandy Michael 구현한 예제( https://codepen.io/mandymichael/pen/xzyrGa )를 통해서 살펴 볼 수 있다. CSS Shapes 모듈의 일부인 'shape-outside' 속성을 사용하면 객체의 모양을 중심으로 텍스트를 줄 바꿈 할 수 있다. 아래 CdoePen 링크를 통해 필요한 간단한 코드 구현을 이해하고 다양한 속성 변경을 통해 흥미로운 텍스트 레이아웃을 웹페이지에 구현해 볼 수 있다.참고 링크: http://bit.ly/2N8RejR

Design Information/HTML5 and CSS3 2018. 9. 1. 19:18

웹 페이지를 통해 두 가지 상품이나 서비스 이미지를 비교하거나 차이점을 강조해서 보여주고자 할 때, 일반적으로 좌.우 또는 상.하 배치를 통해 보여주거나 페이지 전환을 통해 보여주는 경우가 많다.이런 방법은 레이아웃 유지, 공간 제약, 직관성이 떨어져 효율성이 다소 떨어지는 점이 없지 않았다. 물론 다양한 방법의 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