홈으로
Issue No. 20240328

전체보기

웹 애니메이션을 정리해 봅시다 – Transition부터 Web Animation API까지

CSS Transition과 Animation, 그리고 CSS Animation을 기반으로 한 Web Animation API의 기본적인 내용들을 정리해 봅니다. 스크롤 압박이 있지만, 1분 내외의 영상들로 짤막하게 구성해서 보시는 데에 큰 부담은 안가지셔도 될 거예요.…

Canvas로 경이로운 소문 융의 땅 만들기

1월에 유튜브에 올렸던 영상인데, 글이 조금 늦었네요~Canvas를 이용해 드라마 경이로운 소문의 융의 땅을 만들어 봅니다. 융의 땅이 뭔지 모르셔도 그냥 저런 빛 움직임을 만드는 강의라고 생각하고 보시면 됩니다. 외부 라이브러리를…

BBC 인터랙티브 페이지 “코로나19가 바꿀 사무실의 미래” 클론

코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다. 시각적 기능만 비슷하게 만들어 본 것이므로,…

Canvas 성능 개선: off-screen Canvas 사용하기

화려한 인터랙티브 웹에 대한 수요가 많아지며 일반 HTML 요소들로는 표현이 어려운 캔버스(Canvas)의 사용이 점점 많아지고 있어요. 캔버스는 특성상 계속 반복적으로 렌더링하는 식이다보니, 아무래도 일반 웹페이지보다 기기에 부하가 많이 걸리죠~그래서 캔버스를…

공유한 링크의 썸네일과 텍스트 표시: 오픈 그래프

요즘 대부분의 서비스들은 외부 링크를 공유했을 때 아래 그림과 같이 링크에 있는 콘텐츠의 이미지와 제목, 요약글을 표시해 줍니다. 무조건 자동으로 되는건 아니고요, 해당 웹페이지에서 오픈 그래프(Open Graph)라는 메타 정보를 적절한…

웹페이지 가로 모드/세로 모드 인식하기

모바일 트래픽이 데스크탑을 앞지른 시대인 요즘은, 모바일이나 데스크탑 어디에서도 콘텐츠가 무리 없이 보이도록 대부분의 웹페이지들이 반응형으로 제작됩니다. 반응형 페이지를 만들 때 폰을 세로로 들고 있느냐 가로로 들고 있느냐를 판별하고, 그에…

CSS로 다크 모드 인식하기

요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원하죠?CSS 미디어 쿼리에서도 자동으로 라이트 모드와 다크 모드를 인식하고 그에 맞는 CSS를 적용할 수 있는 속성이 있습니다. 바로 prefers-color-scheme! See the Pen CSS) Detect…

프리랜서 일감 구하기 서비스들

프리랜서 또는 예비 프리랜서 여러분들을 위해 외주 일감을 구할 수 있는 웹사이트들을 모아 봤습니다.콘텐츠는 계속 업데이트 할 예정입니다. 국내 서비스 (크몽같은 재능마켓은 제외하고, 프로젝트-프리랜서 매칭 서비스 위주로 소개) 위시켓https://www.wishket.com/ 디자인그룹나인http://designnine.co.kr/…

반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까

글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹을 만드는 요소는 여러가지가…

웹 디자이너 연봉을 올리는 가장 확률 높은 방법

당연하지만, 이 글은 제 개인적인 의견입니다.정답이 아니니 참고 정도로 보아주세요😉그치만, 제 개인적 경험으로는 확실한 방법이라고 장담합니다. 결론부터 이야기하면, 바로 코딩을 배우는 것 입니다.여기서 말하는 코딩은 주로 웹 페이지 시각 구현의…