HackerNoon의 픽셀 아이콘 라이브러리 구축에 대하여

디자인이 빠르게 진화하는 디지털 시대에 작은 디테일 하나하나가 전반적인 사용자 경험(UX)에 큰 영향을 미칠 수 있습니다. 예를 들어 아이콘은 제품의 시각적 매력을 눈에 띄게 향상시킬 수 있습니다.

제3자 자원에 대한 의존도를 줄이기 위한 노력으로 시작된 일은 더욱 중요한 사업으로 발전했습니다.

이 픽셀화된 아이콘 의 오픈 소스 컬렉션은 완벽한 정렬과 일관성을 위해 24px 그리드를 사용하여 디자인되어 웹/앱/제품/페이지/생활 경험을 풍부하게 합니다. HackerNoon의 복고풍 디자인 분위기에서 영감을 받은 이 아이콘은 인터넷 황금 시대의 본질을 요약합니다.

픽셀 아이콘 라이브러리의 개념

디자이너로서 우리는 프로세스를 간소화하기 위한 솔루션을 찾는 경우가 많습니다.

HackerNoon에서는 처음에 Font Awesome 아이콘을 사용하여 사이트에 필요한 기능과 미학을 추가했습니다. 이러한 아이콘은 일관성과 다양한 옵션을 제공함으로써 우리에게 큰 도움이 되었습니다. 그러나 기존 라이브러리에 의존하면 브랜드 아이덴티티가 진화함에 따라 더 이상 서비스를 제공할 수 없습니다.

창립자인 David 와 Linh는 처음에 제품 회의 중 사내 아이콘 라이브러리로 전환하는 아이디어를 제안했습니다. 첫 번째 단계에서는 HackerNoon의 기존 Font Awesome 아이콘을 자체 아이콘으로 교체하는 데 중점을 두었습니다. 후자는 이러한 아이콘을 커뮤니티를 위한 아이콘 라이브러리로 공유하는 데 중점을 두었습니다.

이러한 전환을 통해 우리는 창의적으로 도전할 수 있게 되었습니다. 여정에는 어려움이 있었지만 우리가 제작한 각 픽셀 아이콘은 브랜드의 개성을 빛나게 했습니다. 이러한 픽셀화된 아이콘은 단순한 시각적 요소 이상의 의미를 갖습니다. 이제 그들은 HackerNoon을 반영합니다.

사내 아이콘 디자인: 컨셉부터 제작까지

아이콘 라이브러리를 만드는 것은 창의성, 정확성, 문제 해결을 통한 신나는 여정이었습니다. HackerNoon의 본질이 담긴 픽셀화 아이콘을 제작하는 과정을 살짝 살펴보겠습니다.

1. 디자인 언어 정의

2. 아이디어 및 스케치

3. 아이디어를 디자인하고 현실화하기

4. 커뮤니티 출판 준비: Figma & GitHub

   
   

디자인 언어 정의

우리의 여정은 응집력 있는 디자인 언어를 정의하는 것에서 시작되었습니다. 여기에는 아이콘이 전달하고자 하는 세부 수준, 일러스트레이션 스타일 및 분위기를 결정하는 것이 포함되었습니다. 이러한 기반을 확립함으로써 도서관 전체의 일관성이 보장되었습니다.

• 디테일한 부분에서는 미니멀한 접근 방식을 선택하고 깔끔한 아이콘을 목표로 했습니다. 크기를 조정할 때 아이콘이 시각적으로 어수선해지지 않도록 하여 불필요한 세부 사항을 제거하는 데 도움이 되었습니다.

• 우리의 일러스트레이션 스타일은 특히 HackerNoon 로고 에서 영감을 받았습니다. 80년대에서 영감을 받은 복고풍의 픽셀 블록 디자인 스타일은 우리 브랜드와 완벽하게 일치합니다. 이를 통해 디자인 언어가 전반적인 시각적 정체성과 일관되게 유지되었습니다. 우리는 이를 픽셀화된 아이콘이라고 부릅니다.

  
  

  
  

  

• 일관성을 유지하기 위해 24px 그리드를 선택했습니다. (대부분의 시스템 아이콘이 24x24로 표시되므로 아이콘을 디자인할 때 24px 그리드가 이상적인 것으로 간주됩니다.) 이를 통해 다음을 제공하여 픽셀 단위의 정확도로 100% 크기로 볼 수 있는 아이콘을 만들 수 있었습니다.

  
  

  • 아이콘 콘텐츠를 위한 22px 라이브 영역

  • 그리고 라이브 영역을 둘러싼 1px 패딩

    
    

    

    
    

    
    

아이디어 및 스케치

아이디어 프로세스는 현재 아이콘이 나타내는 기능과 각각의 사용 사례를 나열하는 것으로 시작되었습니다. 그런 다음 이러한 기능에 맞게 아이콘을 어떻게 다시 디자인할 수 있는지 브레인스토밍했습니다. 그런 다음 빠른 낙서와 스케치를 진행했습니다. 이러한 대략적인 스케치는 아이콘을 더 작은 규모로 시각화하는 데 도움이 되었고, 더 빠르게 반복하고 적합하지 않은 아이디어를 폐기할 수 있었습니다.

픽셀화된 아이콘 디자인

다음으로 중요한 단계는 손으로 그린 개념을 픽셀화된 아이콘으로 변환하는 것이었습니다. 이 단계에서는 주로 Adobe Illustrator를 사용하여 픽셀화된 아이콘을 만든 다음 이를 다양한 형식과 크기로 내보내 확장성을 테스트했습니다.

• 우리는 이러한 대략적인 스케치를 Illustrator로 가져오는 것부터 시작했습니다.

  
  

  

• 그런 다음 그리드 도구를 사용하여 24px 그리드를 만들어 픽셀화 프로세스를 시작했습니다.

• 우리는 라이브 페인트 도구를 활용하여 50%가 넘는 공간을 차지하는 각 사각형을 채웠습니다.

  
  

• 디자인이 만족스러우면 라이브 페인트(개체 메뉴 → 확장)를 확장하여 모양을 형성했습니다.

• 다음으로 Shape Builder 도구를 활용하여 이러한 모양을 단순화했습니다. 짜잔! 픽셀화된 아이콘이 준비되었습니다.

  
  

• 그런 다음 아이콘을 12px, 16px, 24px 및 48px의 SVG, PNG로 내보냈습니다. (우리는 아이디어 단계에서 나열한 사용 사례를 기반으로 이러한 크기를 선택했습니다)

  
  

• 또한 유형과 같은 아이콘에 대한 구체적인 세부 정보를 문서화했습니다. 현재 단색 (채우기), 일반 및 밝은 아이콘의 세 가지 유형이 있습니다. 처음 세 개에 속하지 않는 아이콘에는 브랜드 로고 라는 또 다른 유형이 있습니다. (아이콘을 문서화하면 설계 일관성을 유지하고 향후 업데이트를 촉진하는 데 도움이 됩니다)

  
  

커뮤니티 출판 준비: Figma & GitHub

모든 아이콘을 원하는 형식으로 내보낸 후 이러한 아이콘을 정리하고 커뮤니티 게시를 위해 준비했습니다. 우리는 이를 위해 Figma Community File과 GitHub Repository를 선택했습니다.

우리가 모든 것을 준비한 방법은 다음과 같습니다.

• 그룹화 및 구성: 아이콘을 유형에 따라 솔리드, 일반, 라이트, 브랜드 로고의 네 가지 세트로 구성하여 사용자가 특정 아이콘을 더 쉽게 검색할 수 있도록 했습니다.

  
  

• 명명 규칙 및 폴더 구조: 우리는 사용자가 아이콘을 더 쉽게 식별할 수 있도록 명확하고 설명이 포함된 명명 규칙을 확립했습니다. GitHub Repo의 경우 다음과 같은 폴더 구조를 선택했습니다: file-type/color-theme(if any)/size/icon-type/icon-name.file-extension (예: PNG/For Dark Mode/24px/ Solid/Ad.png 및 SVG/Solid/Ad.svg )

  
  

• Figma에서 구성 요소 라이브러리 생성 및 변형 정의: Figma의 구성 요소 시스템을 통해 각 아이콘에 대한 마스터 구성 요소를 만들 수 있었습니다. 우리는 모든 아이콘에 대해 크기 변형을 만들어 사용자가 번거로움 없이 인스턴스를 통해 직접 아이콘 크기를 조정할 수 있도록 했습니다. 이를 통해 아이콘 업데이트 프로세스가 간소화되고 다양한 디자인 파일 간의 일관성이 보장되었습니다.

• GitHub 리포지토리 설정: 우리는 픽셀 아이콘 라이브러리를 위한 전용 GitHub 리포지토리를 만들었습니다. 이를 통해 더 넓은 디자인 및 개발 커뮤니티와 아이콘을 관리하고 공유할 수 있습니다.

  
  

• Github 문서: 우리는 GitHub Repo에 포괄적인 README 파일을 만들었습니다. 여기에는 픽셀 아이콘 라이브러리에 대한 소개, 프로젝트에서 이러한 픽셀화된 아이콘을 사용하는 가능한 모든 방법에 대한 정보, 라이선스 세부 정보, 잘 정의된 기여 지침 및 기타 특별 고려 사항이 포함되었습니다.

  
  

  
  

• Figma에 대한 문서: Figma의 경우 픽셀 아이콘 라이브러리에 대한 심층적인 소개와 구성 요소 라이브러리 및 변형 사용에 대한 튜토리얼이 포함된 별도의 정보 페이지를 만들었습니다. 또한 쉽게 참조할 수 있도록 이름과 함께 아이콘 목록도 포함했습니다.

  
  

• 라이센스: 우리는 아이콘 라이브러리에 대한 라이센스 조건을 명확하게 정의했습니다. 픽셀 아이콘 라이브러리 GitHub Repo 및 Figma 파일은 CC BY 4.0 라이센스에 따라 라이센스가 부여되어 HackerNoon에 대한 적절한 귀속으로 사용할 수 있습니다.

완제품:

픽셀 아이콘 라이브러리를 만들기 위한 우리의 여정은 창의적인 탐구, 도전, 성장으로 가득 차 있었습니다. Font Awesome 아이콘을 사용하는 소박한 시작부터 사이트 전체에서 사내 아이콘을 사용하고 마지막으로 고유한 픽셀 아이콘 라이브러리를 만드는 것까지.

이 과정을 통해 우리는 아이콘이 단순한 상징이 아니라 그 자체로 스토리텔러라는 사실을 알게 되었습니다.

이 창의적인 여정에 동참하여 HackerNoon의 Pixel Icon Library를 가장 먼저 사용해 보세요.

창의성을 유지하고 아이코닉함을 유지하세요.