teleport HQ - 프롬프트 한 줄로 디자인과 리액트 코드까지 완성 teleport HQ는 간단한 프롬프트 입력만으로 웹사이트를 빠르게 작성해줍니다. 반응형 디자인과 프론트엔드 코드 생성도 해줍니다만, 실무에 바로 적용하기엔 아쉬운 부분도 있습니다. 빠른 프로토타이핑이 가능하다는 점에서 꽤 편리하다는 인상을 줍니다.
Open Color - CSS변수로 쉽게 쓰는 오픈소스 컬러 팔레트 라이브러리 Open Color는 13가지 컬러와 10가지 단계로 일관된 컬러팔레트 오픈소스 라이브러리입니다. 디자인 시스템을 구축하기 좋은 환경을 제공합니다. CSS 변수는 물론이고, 여러가지 디자인 소프트웨어에서 사용할 수 있는 컬러 스와치도 제공하고 있습니다.
Grayscale - 먼저 흑백으로 디자인해야 하는 이유 그레이스케일 작업에 대한 장점은 위에 설명 했듯이 대비를 고려한 디자인, 인쇄환경에 유연한 대응 등 분야를 막론하고 장점이 많습니다. 단점은 시간이 걸린다는 점이죠.
PureRef - 디자인, 일러스트 레퍼런스 어플리케이션 PureRef는 위의 예시처럼 여러 이미지를 동시에 나열해 놓고 비교해보기 좋은 프로그램입니다. 이미 하드에 저장되어있는 사진들을 끌어다 놓고 배열할 수도 있지만, 사이트에서 바로 복사해서 붙여 넣기로 넣을 수도 있습니다.
CSS RESET - font-size:62.5% 초기화 방법을 선호하지 않는 이유 2배를 해도, 1/2를 해도 8의 배수로 8px 그리드 시스템을 기반으로 디자인하기에 좋은 기본값입니다. 물론 즉각적으로 계산하기에는 10단위로 끊어서 계산하는 것이 편리할 것입니다. 하지만 8배수 디자인을 하기에 더 용이한 것은 기본 폰트 값 16px = 1rem을 이용하는 방법입니다.
60-30-10 컬러 규칙 색에 대한 여러가지 이론들이 존재하지만, 실제로 적용해서 활용하는데는 많은 어려움이 있습니다. 그 중에서도 제법 간단한 방법으로 색을 활용하는 방법이 60-30-10 Color Rule이라 불리는 규칙입니다.
웹사이트 제작시 유용한 무료아이콘 웹사이트 제작시 브랜딩을 생각한다면, 아이콘을 새로 그리는 것이 가장 좋겠지만 이미 널리 통용되고 있는 아이콘들이 많다. 바퀴를 재창조하는 것보다 꼭 중요한 것들만 새로 그리고, 좋은 소스들은 가져다 쓰는 것이 시간을 아끼는 방법일 것이다.