위어드섹터 공식 블로그

랜딩페이지라는 것은 무엇일까요? landing 이라는 언어로 ‘착륙’을 의미합니다. 사용자가 처음에 도착하는 페이지를 말합니다. 이로써 제품에 대한 첫인상을 전달할 수 있는 부분입니다. 랜딩페이지에서는 공통적으로 ‘전환’ 이라는 목표를 만들어야 합니다. 그렇기 때문에 랜딩페이지의 역할이 하나의 영업요소이며, 중요한 파트입니다. 그렇다면 저희는 이 ‘전환’을 만들기 위해서 어떤 방식으로 접근하여 디자인해야 할까요? 랜딩페이지를 리디자인 진행하면서 여러가지 디자인 시도를 해보았는데요. 이 과정을 통해 얻었던 인사이트를 정리하여 공유해보고자 합니다. 랜딩페이지를 설계하기 전에 .. 목표(mission)을 확인하고, 어떤 방법으로 문제를 해결 할 것인지 로드맵을 설계해보세요. 로드맵을 제작한다는 의미가 장황하게..

디자인 시스템 내에는 컬러, 타이포, 아이콘, 쉐도우, 그리드, 버튼, 테이블 등 ,, 여러 가지로 제한할 수 있습니다. 저는 그중에서도 복잡한 디자인 시스템을 어떻게 규정할 수 있을까에 대해 집중해 보았는데요. 그중에서도 Figma의 Variants 기능을 무수히 많이 사용해 보면서 알아낸 것들을 간단한 프로세스 5단계로 공유하고자 합니다. Q. 디자인 시스템의 무수한 경우의 수를 어떻게 정의할 것인가요? 🤯 버튼 시스템 경우 고려할 사항 사이즈 별 다른 UI 상황마다 다르게 쓰이는 UI 아이콘이 있는 경우와 아닌 경우로 변형될 수 있는 UI A. Variants 기능을 5단계로 적용해본다. 😆오늘 5단계로 해볼 수 있는 variants기능을 구조로 요약하자면 아래와 같습니다. 1. 시스템에 들어갈 속..

스타트업에서는 대부분 잘 갖춰져 있는 디자인 시스템이 없을 것이라고 생각됩니다. 모든 프로세스가 에자일 하게 돌아가는 조직이라면, 디자인 시스템을 만드는 것보다 다른 곳에 시간을 쏟아야 하는 경우가 많습니다. 하지만 디자인 시스템이 없다면 디자인에 관련된 언어들은 모두 흩뿌려져 있고 이를 매번 모아야 된다는 말과 같습니다. 더 이상 반복적인 디자인 업무는 하지 않도록 이를 자동화시키고, 이 외에 남는 시간에 창의적인 작업을 하는 것에 투자하는 것이 좋습니다. 디자인 시스템이 뭐야? 디자인 시스템은 팀이 보다 효율적으로 일관된 디자인을 제공하는 데 도움이 되는 도구, 지침, 공유 가치 및 원칙의 생태계입니다 . 디자인 및 프론트엔드 도구 "디자인 시스템은 제품을 채택하는 것이 더 효율적이고 응집력 있게 될..

피그마를 사용하면 다양한 프로토타입을 사용할 수 있는데, 대표적인 프로토타입으로 스크롤이 있습니다. 기본 제작 원리만 알면 다양하게 이용할 수 있어 배워두면 유용합니다. 스크롤 종류 스크롤은 오른쪽 상단 [Prototype]에서 확인가능합니다. 스크롤은 우측상단의 [Prototype]탭에서 확인가능합니다. 스크롤을 만들 프레임을 선택하면 [Overflow Scrolling]에서 스크롤을 설정할 수 있습니다. 오버 플로우 스크롤은 오버 플로우되는 부분을 스크롤링 하겠다는 의미이기 때문에 “오버플로우(프레임 크기보다 안에 있는 컨텐츠의 크기가 클때)”가 먼저 진행되어야 아래의 항목이 생겨납니다. 스크롤은 총 3가지로 나누어져있습니다. 1. Horizontal Scrolling(가로 스크롤) 2. Vertic..

안녕하세요 ! 디자이너 JJ입니다. 저번 글에서는 Figma에서 가장 유용하게 사용할 수 있는 Component에 대해 알아봤으니 이번 글에서는 그 Component를 활용하는 Variants기능에 대해 알아보겠습니다.🧐 1. Variants란 무엇일까요? Variants란 변형이란 뜻으로 컴포넌트들을 조합하여 컴포넌트 세트를 만들어 좀 더 체계적으로 사용하는 기능입니다. 이 기능을 사용하여 토글버튼의 on/off상태를 만들 수도 있고 버튼의 Default, hover, focus, disabled를 사용할 수 있습니다. 예를 들어 이런 토글을 사용할때 각각의 컴포넌트를 만들어 사용하기보단 컴포넌트에 variant 속성을 부여해 하나의 컴포먼트로 토글의 [on/off]를 사용하는 것이 더 편리합니다. 2..