위어드섹터 공식 블로그

안녕하세요. 오늘은 주니어 디자이너라면 잘 모를 수밖에 없는 디자인 핸드오프에 대해 설명드리려 합니다. 디자인 핸드오프란 무엇일까? Hand off는 손을 떠나다라는 의미를 갖고 있습니다. 디자인 핸드오프(Design Hand off)는 완성된 디자인을 떠나보낸다라는 의미로 직역할 수 있습니다. 그러나 모든 디지털 화면에서 완성된 디자인은 존재하지 않습니다. 어떤 화면이라도 사용자와 상황에 따라 개선점이 분명히 존재합니다. 따라서 “완성된 디자인을 떠나보낸다”보다는 한 단계의 끝으로서 디자이너가 개발을 위해 자신의 디자인을 전달하는 과정이라고 생각하면 좋을것 같습니다. 핸드오프에서 중요한 5가지 1) 유저플로우(User Flow) : 화면 디자인에서 화면 흐름으로 2) 유즈케이스(Use Cases) : ..

Design 2023. 9. 15. 13:18

Q UI/UX 디자이너가 왜 웹코딩(html, css, javascript)을 배워야 하는 걸까? 종종 회사 공고등을 보면 디자이너에게 개발 역량을 요구하는 경우가 있습니다. 왜 필요하다고 하는 걸까요? 디자이너는 개발로 구현 가능한 부분들과 불가능한 부분을 모르기 때문에 처음 디자인이 나와도 여러 번의 수정을 하게 되며 개발자와 많은 소통을 하게 됩니다. 이 과정에서 디자이너는 디자이너대로 고민해 만든 시안을 계속 수정해야하고 개발자는 개발자대로 계속 피드백을 하느라 개발하는 시간보다 소통하는 시간이 더 길어질 때도 있습니다. 디자이너가 웹 코딩에 대한 기초 지식만을 알고 있어도 이 소통비용이 확 줄어들 수 있습니다. 또한 디자인이 구현되는 매체에 대한 이해는 필수적입니다. 편집디자이너가 종이 재질과 ..

Design/Website 2023. 8. 4. 10:30

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

Design/Website 2023. 7. 12. 17:58

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

Design/Figma 2023. 5. 12. 19:14

피그마의 플러그인을 활용하여 원형텍스트 제작과 돌아가는 프로토타입을 구현해 보겠습니다! 원형텍스트 제작방법(circle text) 1. 원하는 텍스트를 작성해 줍니다. 2. community에 arc를 검색해 [arc] 플러그인을 설치해 줍니다. 3. text box를 선택 후 [arc] plugin을 실행해 줍니다. 4. 플러그인에서 [Bend Strength]를 +로 조절하면 바깥쪽으로 곡선이 만들어지고, -로 조절하면 안쪽으로 곡선이 만들어집니다. 5. 검은색으로 원형 텍스트가 생성됩니다. 돌아가는 텍스트 애니메이션 (text animation) 1. 원형 텍스트 그룹을 4개를 만들어준 뒤 각도를 90도씩 다르게 제작해..

Design/Figma 2023. 4. 26. 01:31

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

Design 2023. 2. 7. 18:36

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

Design/Figma 2023. 1. 18. 17:00

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

Design/Figma 2022. 11. 22. 11:47