Skip to content

웹디자인

  • 코드
    CSS 그리드로 미지원 브라우저 지원하기
    ‘지원’의 의미 그리드 미지원 브라우저를 어떻게 지원할지 고민하기 전에, 먼저 ‘지원support‘의 의미를 정할 필요가 있다. 지원이란 대상 목록에 있는 모든 브라우저에서 우리 사이트가 완전히 동일한 모습이라는 의미일 수 있다. 또한, 어떤 브라우저에서도 따로 마무리 작업을 할 필요가 없는 만족스러운 상태이거나,...
  • 웹디자인
    웹폰트 사용하기
    폰트를 선택했다면 웹사이트에 적용해보자. 웹폰트는 @font-face 규칙을 통해 CSS에서 정의한다. 웹 개발자들은 @font-face 규칙을 직접 작성해본 혹은 복사해 붙여넣기라도 해본 경험이 있을 것이다. 그게 아니라도 최소한 본 적은 있을 것이다. 그래도 완벽하게 내 것으로 만들기 위해 기본 예제를 빠르게 실행해보자. 이렇게 @font-face 규칙...
  • 디자인
    CSS 그리드 레이아웃을 지금 사용해도 정말 괜찮을까
    저는 경비행기 조종을 배우고 있습니다. 경비행기 조종을 하면 컴퓨터에서 벗어날 수 있죠. 얼마 전에는 세스나150Cessna 150을 조종하고 있었습니다. 브리스틀 공항에 접근하면서 기체 고도를 낮게 유지하려고 고군분투하던 중, 말 그대로 구름 속으로 빨려 들어가 버렸습니다. 비행 강사는 이렇게 말했습니다. “당신이 잘못한 건 아니에요. 하지만 어쨌든 처리...
  • 코드
    WebGL을 사용한 애니메이션 및 인터랙션 기법
    프로세스 제약사항 이 실습에서는 주로 three.js와 GreenSock 라이브러리를 사용했으며, 3D나 애니메이션 소프트웨어를 사용하지 않고 수기로 직접 코딩했습니다. 실습은 한 번에 큐브 하나씩 캐릭터를 프로그래밍하는 방식으로 진행됐습니다. 주로 코드 값을 미세하게 조정해 비율, 위치 및 전체 렌더링을 수정하려고 했죠. 그리고 최종적으로 사용자 입력 (...
  • 코드
    웹 프로젝트는 PWA이어야 한다
    PWA를 잘 설명하는 좋은 무료 콘텐츠도 많지만, 잘못된 정보 역시 만연해 있다. 아마 다음 항목 중 하나 이상은 들어봤을 것이다. PWA를 구축하려면 자바스크립트JavaScript 프레임워크를 사용해야 한다. PWA를 구축하려면 싱글 페이지 앱single page app(SPA)으로 시작해야 한다. PWA는 오직 사용자가 설치할 수 있는 ‘앱&...
  • 디자인
    스케치로 반응형 웹 디자인하기
    포토샵의 오랜 사용자였던 나는 2014년도 초반에 스케치로 갈아탄 후 다시는 포토샵을 쳐다보지 않고 있다. 단순한 인터페이스와 파일 자동저장 기능, 크기가 무제한인 캔버스 등 스케치 프로그램의 특성을 좋아한다. 하지만 다른 많은 프로그램에도 비슷한 기능이 있다. 더군다나 가장 최근에 업데이트(이 글을 쓸 당시에는 스케치 3.2)되기 전까지 사용자들은 스케치...
  • 디자인
    Craft 플러그인을 사용해 스케치에서 실제데이터로 디자인하기
    스케치로 앱 디자인할 때, 가장 간단하게 데이터 작업을 하는 방법은 바로 InVision의 Craft 플러그인을 사용하는 것이다. 가상의 ‘무비 파인터(Movie Finder)’ 앱을 제작해보며, Craft 플러그인을 200% 활용하여 실제 데이터로 앱에 영화 콘텐츠를 채우고 검색 기능을 제공해보자. ≪스케치≫(웹액츄얼리코리아, 2017)의 저자 ‘크리스티...
  • 디자인
    반응형 웹 디자인에서 글줄의 길이와 글자 크기 균형 잡기
    모든 법칙은 깨어진다는 것을 명심하라. 얀 치홀트는 그동안의 자신의 작업물에서 중앙으로 글을 정렬시켰던 법칙을 자기 스스로 깼다. 읽기 편한 글자 크기를 위해 이상적인 글줄의 길이는 잊어라. 글자 크기가 (너무 작지 않고) 알맞으면 읽기가 쉽다.
  • 디자인
    마이크 몬테이로가 전하는 훌륭한 디자인이란
    디자이너라는 길에 운좋게 들어선 당신. 하지만 디자이너라는 직업은 결코 만만치 않은 길입니다. 과거의 경험을 거울삼아 디자이너들에게 그 길을 알려주며 경고판까지 보여주는 멘토, 마이크 몬테이로를 .net 매거진이 만났습니다.
  • 디자인
    2010년 웹디자인 트렌드와 곧 다가올 트렌드
    앞으로도 지속될 것으로 보이는 2010년 웹디자인 트렌드 13가지! 2010년이 불과 3개월 밖에 남지 않았지만 올 해 웹디자인의 혁신적인 변화들은 디자이너들에게 놀라운 발전을 가져다 주었고, 동시에 웹디자인의 무한한 가능성을 제시하고 있다.


맨위로