Category: GUI Design

  • 소프트웨어는 곧 문화

    소프트웨어는 곧 문화

    소프트웨어는 한때 우리와 동떨어진 존재처럼 느껴졌습니다. 유리창 너머에 효율적이고 순종적인 존재로 자리 잡고 있었죠. 그러다 우리 손안에 들어오게 되었습니다. 손가락으로 확대/축소하고, 스와이프하고, 탭하는 모든 동작 하나하나가 우리의 생각, 감정, 그리고 소통 방식을 바꿔놓았습니다. 한 세대에 걸쳐 소프트웨어와의 연결은 사용자 경험을 인간적인 경험으로 탈바꿈시켰습니다.

    이제 또 다른 변화가 다가오고 있습니다. 소프트웨어가 지능화되고 있는 것입니다. 고정된 상호작용 방식 대신, 학습하고, 적응하고, 반응하는 시스템을 구축하게 될 것입니다. 인터페이스는 실시간으로 진화하며, 우리의 필요와 행동 변화에 따라 형태를 바꿀 것입니다. 한때 정적이었던 것이 유동적이고, 적응력이 뛰어나며, 마치 살아있는 것처럼 변모할 것입니다. 우리가 어디로 향하고 있는지 이해하려면 과거를 되돌아보는 것이 도움이 됩니다. 지난 20년간 가장 영향력 있는 상호작용들을 되짚어보고, 현재 활동 중인 디자이너와 개발자들의 이야기를 통해, 하나의 디자인 결정이 어떻게 한 시대를 정의하게 되었는지, 그리고 우리가 오늘날 만드는 제품들이 어떻게 다음 세대를 형성해 나갈지 살펴볼 수 있습니다.

    지난 20년간의 상징적인 상호작용을 살펴보세요.

    스티브 잡스가 유명한 “누가 스타일러스를 원합니까?” 기조연설에서 손가락으로 이미지 크기를 조절했을 때, 그는 신체와 인터페이스 사이의 거리를 허물었습니다. 사용자들은 처음으로 손을 뻗어 화면 속 이미지와 웹페이지를 촉각으로 조작할 수 있게 되었습니다.

    멀티터치 시스템에 대한 연구는 1980년대부터 진행되어 왔지만, 애플 아이폰은 이를 대중 시장에 처음으로 선보였습니다. 아이폰은 탄력적인 경계, 저지연 손가락 추적, 실제 재료의 저항을 모방한 크기 조절 곡선과 같은 유사 햅틱 기술을 통해 핀치 투 줌 기능을 놀라울 정도로 촉각적으로 구현했습니다. 운동량, 마찰, 시각적 탄력성과 같은 이러한 미묘한 물리적 요소들은 휴대폰에 실제 햅틱 엔진이 탑재되기 훨씬 전부터 마치 물체를 만지는 듯한 느낌을 주었습니다. 이러한 기술 덕분에 핀치 투 줌은 우리가 손으로 직접 형태를 바꿀 수 있는 무한한 시각적 캔버스로서 인터넷을 이해하는 관문이 되었습니다. 이러한 변화는 우리가 세상을 살아가는 방식뿐만 아니라, 세상 속에서 우리의 위치를 ​​인식하는 방식까지도 바꾸어 놓았습니다.

    우리는 지도를 정적인 기록으로만 여기는 대신, 손가락으로 확대하여 새로운 식당, 상점, 체육관을 찾아냅니다. 이미지를 있는 그대로 받아들이는 대신, 확대하여 약혼반지를 자세히 보거나 포토샵으로 보정했는지 확인합니다. 터치스크린이 보편화된 시대에 자란 사람들에게는 탐색, 즉 세부 사항을 찾기 위해 안으로 들어가거나 맥락을 파악하기 위해 밖으로 확장하는 것이 자연스러운 행동 양식입니다.

    디자이너 아자 라스킨이 고안한 무한 스크롤은 “다음 페이지”나 “새로 고침” 버튼을 클릭하는 번거로움을 없앴습니다. 이는 동적 콘텐츠 로딩과 미묘한 흐름 신호를 활용하여 정보가 끊임없이 이어지는 듯한 느낌을 주는 초기 웹 실험에서 영감을 얻었습니다. 페이스북과 트위터에서 처음 대중화된 무한 스크롤은 경계 없는 정보의 세계, 즉 끊임없이 업데이트되고 점점 더 개인화되는 스트림인 피드라는 현대적 개념을 탄생시켰습니다. 마치 현대판 광장처럼, 우리는 피드를 통해 사촌의 졸업 소식부터 세계 정세까지 모든 것을 접하게 됩니다.

    특히 젊은 세대에게 있어, 이 끝없는 디자인은 뉴스부터 인기 있는 뷰티 트렌드, 변화하는 사회적 규범에 이르기까지 모든 정보를 정신없이 빠르게 업데이트하는 문화를 만들어냈습니다. 무한 스크롤과 알고리즘 기반 큐레이션에 대한 의존성은 언어학자 아담 알렉식의 “맥락 붕괴”라는 현상을 초래합니다.

    특히 “추천” 페이지는 커뮤니티 간의 정보 교류를 바이러스처럼 빠르게 촉진하며, 정체성을 재구성하고 새로운 유대감을 형성합니다.

    ‘좋아요’ 버튼이라는 개념은 페이스북이 2009년에 선보이기 훨씬 전부터 실리콘 밸리에서 끊임없이 논의되어 왔습니다. 특히 디자이너 밥 굿슨은 2003년 옐프(Yelp)를 위해 ‘엄지척’과 ‘엄지내림’ 버튼을 구상했는데, 이는 사용자 리뷰에 대한 참여도를 높이면 더 많은 사람들이 리뷰를 남기게 될 것이라는 직감에서 비롯되었습니다. 그의 직감은 적중했습니다. 사용자들이 리뷰를 ‘유용함’, ‘재밌음’, ‘멋짐’ 등으로 쉽게 평가할 수 있도록 함으로써 옐프는 리뷰 수를 폭발적으로 늘렸고, 이는 페이스북의 ‘Props’라는 비밀 프로젝트에 영감을 주었습니다.

    오늘날 ‘좋아요’ 버튼은 참여 중심 경제의 핵심을 이루며 하루에 약 1,600억 번의 클릭이 발생하는 것으로 추산됩니다. 단순한 엄지척 모양은 레딧(Reddit)의 추천 화살표, 인스타그램(Instagram)의 하트 두 번 탭, 슬랙(Slack)의 방대한 ‘reactji’ 팔레트에 이르기까지 다양한 시각적 반응 표현으로 진화했습니다. 온라인 어디를 가든 우리는 즉각적이고 보편적으로 이해되는 긍정적 또는 경우에 따라서는 부정적 표현을 접할 수 있으며, 이는 우리가 소비하는 콘텐츠를 선별하는 암묵적인 방식이 됩니다. ‘좋아요’의 변화는 크리에이터가 무엇을 홍보할지, 플랫폼이 콘텐츠를 배포하는 방식, 그리고 가장 중요하게는 사용자가 콘텐츠의 관련성을 판단하는 방식을 결정합니다.

    소프트웨어 개발자 로렌 브리히터는 2009년 트위터 클라이언트인 트위티(Tweetie)를 위해 ‘당겨서 새로고침’ 기능을 개발했습니다. 새총을 당기는 동작을 연상시키는 이 기능은 콘텐츠 탐색에 재미있고 역동적인 느낌을 더했습니다. 또한, 인간의 뇌는 보상을 기대할 때, 특히 보상이 불확실할 때 더 많은 도파민을 분비하도록 되어 있는데, 이러한 보상 회로를 활용한 것입니다.

    현재 X 플랫폼에서 ‘당겨서 새로고침’ 기능은 무한 스크롤과 함께 작동하여 새로운 업데이트를 로드하는 동안 무한 스크롤은 알고리즘에 따라 정렬된 이전 콘텐츠를 보여줍니다. 하지만 이 기능은 이제 모바일 앱 생태계 전반에 걸쳐 표준 동작으로 자리 잡았으며, 사용자는 무의식적으로 화면을 당겨 새로고침할 수 있게 되었습니다. 우리는 화면을 아래로 당기면 새로운 좋아요, 댓글, 연결 정보가 표시된다는 것을 알고 있습니다. 소셜 미디어뿐 아니라 속보, 날씨, 주가, 콘서트 티켓 예매 등 모든 최신 정보를 얻는 데 이 동작이 사용되고 있으며, 실시간 정보에 대한 우리의 욕구와 불가분의 관계에 있습니다.

    엔지니어이자 발명가인 더글러스 엥겔바트가 1958년 ‘모든 데모의 어머니’라 불리는 데모를 통해 협업 실시간 편집을 개척했지만, 구글은 2009년 구글 문서에서 동시 편집 기능을 도입하며 이를 대중화했습니다. 7년 후, 브라우저 기술, 특히 WebGL의 발전으로 Figma는 전문가 수준의 제품 디자인 도구를 온라인으로 제공하여 인터페이스 제작에 있어 다중 사용자 협업을 가능하게 했습니다. 한때 혼자서 하던 문서, 스프레드시트, 프레젠테이션 또는 디자인 제작이 이제는 공동 작업으로 바뀌었습니다. 정적인 결과물이 생동감을 얻고, 소유권이 한 사람에서 여러 사람에게로 넘어갔습니다.

    이는 멀티플레이어 비디오 게임의 공유 세계 논리를 반영합니다.

    고품질 화상 회의 도구와 결합된 다중 사용자 협업은 언제 어디서든 공동 작업을 가능하게 했고, 코로나19 팬데믹의 제약이 사라진 후에도 오랫동안 지속된 하이브리드 근무 환경을 조성했습니다. 생산성 향상 외에도 이러한 도구들은 독서 모임, 비영리 행사, 단체 여행 등 공동체 형성을 더욱 쉽고 편리하게 만들어 주었으며, 창작자들이 자신의 열정을 추구할 수 있도록 지원해 주었습니다.

    수십 년에 걸친 음성 인식 소프트웨어 개발 여정은 1997년 드래곤 시스템즈(Dragon Systems)가 연속 음성 인식 기능을 갖춘 최초의 소비자 제품인 드래곤 내추럴리스피킹(Dragon NaturallySpeaking)을 출시하면서 중요한 이정표를 세웠습니다. 하지만 대부분의 사람들에게 컴퓨터가 말하는 경험을 처음으로 선사한 것은 2011년 애플의 시리(Siri)였습니다. 이후 아마존의 알렉사(Alexa), 마이크로소프트의 코타나(Cortana), 삼성의 빅스비(Bixby)를 비롯해 끊임없이 늘어나는 인공지능 기반 음성 비서들이 그 대열에 합류했습니다.

    세탁기, 냉장고 같은 가전제품부터 스마트 TV, 보안 기기 같은 전자제품, 그리고 차량용 시스템에 이르기까지 음성 상호작용은 우리의 가장 사적인 공간 곳곳에 스며들어 있습니다. 이러한 환경에서 자란 사람들에게는 기술이 일상적인 작업에 녹아들어 생각의 속도로 움직이고 인간의 언어로 반응하는 것이 당연한 일입니다. 특히 우리가 자라면서 시리나 알렉사를 방 안이나 주머니 속의 주변 지능처럼 여겨왔다면, 명령이란 사실상 담론이며 기술은 우리의 일상적인 작업을 신속하게 처리해 주는 도구라는 것을 이해할 것입니다.

    틴더 공동 창업자 조너선 바딘이 마음에 드는 상대를 오른쪽으로 스와이프하고, 마음에 들지 않으면 왼쪽으로 스와이프하는 방식을 고안했을 때, 그는 이전 온라인 데이팅 시대를 규정했던 성격 테스트와 매칭 알고리즘을 뒤흔드는 혁신적인 동작을 만들어냈습니다. 마치 카드 덱을 정렬하는 것처럼, 이 방식은 상호작용에 게임 요소를 더하고 직관적인 방식으로 즉각적인 반응을 유도했으며, 매칭이 성사되었을 때는 큰 만족감을 선사했습니다.

    오른쪽과 왼쪽으로 스와이프하는 방식은 온라인 데이팅을 넘어 다양한 앱에서 사용되고 있습니다. 이제 사용자들은 옷을 사고, 친구를 사귀고, 외국어를 배우고, 주식을 거래하고, 메시지를 확인하고, 심지어 어떤 사진을 삭제할지 결정하는 데에도 스와이프를 활용합니다. 이 방식이 너무나 보편화되어 Z세대는 “좋아요”와 “싫어요”를 나타내는 은어처럼 “오른쪽으로 스와이프”와 “왼쪽으로 스와이프”를 사용하는데, 이는 빠른 의사 결정을 유도하고 수많은 요소를 이분법적인 질문으로 단순화하는 이 동작의 강력한 영향력을 보여줍니다.

    넷플릭스는 프로그램의 다음 에피소드 자동 재생 기능을 도입함으로써 사용자의 역할을 능동적인 참여자에서 수동적인 시청자로, 즉 선택에 의한 참여에서 선택 해제로 전환시켰습니다. 이후 유튜브는 추천 영상 자동 재생 기능을 도입했고, 이러한 추세는 틱톡으로 이어져 이제는 사용자가 자동 ​​재생 기능을 켜지 않아도 되고, 앱을 종료하지 않는 한 끌 수도 없습니다. 알고리즘은 사용자가 반드시 원하는 콘텐츠가 아니더라도 콘텐츠를 제공하지만, 사용자가 이에 대해 이의를 제기하지 않으면 알고리즘은 메타데이터를 기반으로 사용자의 페르소나를 구축하고, 이를 통해 알고리즘이 추측하는 바를 강화합니다.

    이러한 현상은 참여와 비참여의 경계를 모호하게 만들고, 비행동 속에 암묵적인 행동을 포함하게 합니다. 이러한 현상은 지메일의 스마트 작성 기능부터 구독이나 생활용품 구매의 자동 갱신, 양식 자동 완성 기능에 이르기까지 문화와 상업의 다른 영역으로 확산되었습니다. 우리는 인터페이스가 사용자의 성향과 취향을 예측할 뿐만 아니라, 기술에 경로 수정을 요청할 때 이를 기억하기를 기대합니다.

    컴퓨터 과학자 우드로 블레드소는 1960년대 중반 최초의 자동 얼굴 인식 시스템을 개발하여 디지털 생체 인식 연구에 박차를 가했고, 이는 1990년대에 이르러 법 집행 분야에서 활용되기 시작했습니다. 하지만 일반 소비자들이 신체를 비밀번호처럼 사용할 수 있게 된 것은 2013년 애플의 터치 ID와 2017년 페이스 ID였습니다. 생체 인식은 수동 로그인을 매끄럽고 즉각적인 인증으로 대체함으로써 불편함을 최소화하고 우리의 신체를 우리가 사용하는 인터페이스와 불가분하게 연결했습니다.

    우리는 라떼를 사기 위해 얼굴을 스캔하거나 공항 보안 검색대를 통과하기 위해 홍채를 등록하는 것을 자연스럽게 여깁니다. 지문이나 눈길만으로 중요한 계정을 잠금 해제하고, 이러한 시스템이 견고하고 안전하다는 것을 신뢰합니다. 생체 인증은 애플 워치, 오우라 링, 스마트 안경과 같은 웨어러블 기기의 등장을 예고했습니다. 이러한 기기들은 심박수, 혈중 산소 농도, 걸음 수, 수면 패턴 등 모든 것을 추적합니다. 심지어 배란일이나 심장마비 위험까지 알려줍니다. 민감한 정보에 접근, 관리 및 해석하기 위한 생체 인식 기술의 발전은 소프트웨어에 대한 전례 없는 수준의 신뢰를 구축했습니다.

    2017년, 구글 브레인의 과학자 8명은 “Attention Is All You Need”라는 연구 논문을 발표했습니다. 이 논문은 트랜스포머(Transformer)라는 딥러닝 아키텍처를 소개하며 오늘날의 자연어 처리 로봇(LLM)의 토대를 마련했습니다. 트랜스포머 덕분에 AI 모델은 순서에 상관없이 텍스트를 읽고, 무엇이 중요한지 판단하며, 위치가 아닌 관계를 기반으로 의미를 도출할 수 있게 되었습니다. 이러한 혁신을 바탕으로 오픈AI는 2022년 ChatGPT를 출시했고, 현재는 구글 딥마인드의 제미니(Gemini), 앤트로픽의 클로드(Claude), 메타의 라마 2(Llama 2) 등 다양한 LLM이 등장했습니다. 자연어 프롬프트는 사용자가 일상적인 대화를 통해 기계와 상호작용할 수 있도록 함으로써, 기존 지식이나 기술 수준에 관계없이 누구나 무엇이든 생성할 수 있도록 만들었습니다.

    이는 소프트웨어를 단순한 도구가 아닌 동반자로서 활용하는 새로운 방식을 제시했습니다. 모든 연령대의 사람들이 연애 상담부터 재정 관리, 집수리 ​​계획, 연구까지 모든 분야에서 자연어 처리 로봇을 이용하고 있습니다. 컴퓨터가 의도와 지시를 모두 이해하는 세상에서는 더 많은 사람들이 더 적은 자원으로 더 많은 것을 만들어낼 수 있습니다. 지역 농가를 돕는 앱이든 웹 시 프로젝트든 말이죠. 자연어 프롬프트는 소프트웨어를 유기적으로 만들어주고 기술에 대한 접근성을 전례 없는 수준으로 높여주지만, 여전히 채팅 인터페이스에 국한되어 있습니다. 우리가 기계와 다른 방식으로 소통하는 미래에는 인간의 비전을 실질적인 영향력으로 전환하는 새로운 길이 열릴 것입니다.

    인공지능(AI)은 도구이자 협력자로서 우리를 인간답게 만드는 요소들을 더욱 강화할 수 있습니다. 이미 우리는 명령보다는 대화를 통해 지시하는 방식을 더 많이 사용하고 있습니다. 계층 구조와 매개변수 대신 목표, 동작, 전체적인 맥락으로 소통합니다. 미래는 자동화를 통해 없애는 것이 아니라, 어디에 집중할 것인지에 달려 있습니다. 전 세계의 디자이너들은 이러한 변화 속에서 길을 찾고 있습니다. 우리의 호기심이 이끄는 곳, 의미를 찾는 곳, 기술을 적용하는 방식, 이러한 요소들이 앞으로도 소프트웨어를 만들어갈 원동력이 될 것입니다.

    원문: Software is culture

  • 피그마 그래픽 기법 시리즈 – #1

    피그마 그래픽 기법 시리즈 – #1

    그래픽 디자인은 시각적으로 매력적이고 효과적인 커뮤니케이션을 위한 중요한 방법입니다. 최근에는 디자이너들 사이에서 피그마가 매우 인기 있는 도구로 떠오르고 있습니다. 피그마는 협업 기능과 사용 편의성을 갖춘 웹 기반 디자인 툴로, 다양한 기능을 활용하여 그래픽 디자인을 할 수 있습니다. 이 글에서는 피그마를 사용한 효과적인 그래픽 디자인 방법에 대해 알아보겠습니다.

    그래픽 디자인은 특정 청중에게 메시지와 아이디어를 전달하기 위해 시각적 콘텐츠를 만드는 작업입니다.

    비즈니스와 조직이 대상 청중과 연결하고 메시지를 효과적으로 전달하는 데 도움이 되므로 브랜딩, 마케팅 및 커뮤니케이션에서 중요한 역할을 합니다.

    UI/UX 디자이너로서 제 전반적인 기술을 넓히고 향상시키는 데 도움이 될 것이기 때문에 한동안 손을 대고 싶었습니다.

    그리고 저는 Figma 우월주의자(다른 소프트웨어를 배우지 않음)이므로 포스터 몇 개를 만들고 물을 테스트하는 데 사용할 것입니다.

    피그마를 사용하는 이유

    Photoshop은 사용하기 어렵기 때문입니다.
    제가 지금 하는 일의 유형에 비해 과잉이고 그것을 사용하는 것이 이치에 맞지 않는다고 말했습니다.
    하지만 저는 그것을 배우고 현재 스택에 한 번에 하나의 튜토리얼로 추가하고 있습니다.
    그래서 나는 무엇을 다시 사용할 것인가? Figma는 내가 기술적으로 마스터한 유일한 디자인 소프트웨어이기 때문입니다.많은 앱이 있지만 Figma만큼 쉽게 디자인할 수 있는 앱은 없습니다.
    실제로 들여다보면 일러스트레이터의 톤다운 버전과 비슷합니다.

    Figma와 Illustrator는 모두 유사한 기능을 많이 제공하며, 이제 둘 다 같은 회사에 속해 있으므로 곧 그들 사이에서 파일을 가져올 수 있다는 것을 알고 있습니다.

    피그마에서 일러스트레이션을 어떻게 사용합니까?

    figma에서 일러스트레이션을 사용할 때 알아야 할 몇 가지 사항이 있습니다. 미디어 파일 유형에 따라 일러스트레이션을 실제로 변경할 수 있는지 여부입니다.

    JPG 또는 PNG 일러스트레이션을 업로드하면 일러스트레이션의 색상이나 모양을 변경할 수 없습니다. 다른 쪽에 있는 SVG는 확장 가능한 벡터이므로 원하는 대로 크기를 조정하고 색상을 변경하고 편집할 수 있습니다.

    피그마에서 일러스트레이션을 어떻게 사용합니까?

    Google에서 오픈 소스 또는 로열티 프리 SVG 일러스트레이션을 검색하거나 모든 작업을 수행하는 Figma에서 직접 커뮤니티에서 만든 플러그인을 사용할 수 있습니다.

    제가 개인적으로 사용한 첫 번째 플러그인은 freepik에서 제작했으며 선택할 수 있는 많은 일러스트레이션 팩과 스타일이 있습니다.

    이미지를 클릭하고 어떻게 작동하는지 확인해보세요. 일러스트레이션을 거의 검색하고 색상을 선택한 다음 가져오기 버튼을 클릭하기만 하면 됩니다.

    나중에 색상이 만족스럽지 않거나 변경하고 싶은 경우 그림을 클릭하면 오른쪽 패널에 색상 옵션이 표시됩니다. 벡터 포인트를 이동하고 레이어를 수정하려면 그림이 그룹 해제될 때까지 여러 번 클릭하면 됩니다. 또는 그림을 마우스 오른쪽 버튼으로 클릭하고 그룹을 해제할 수도 있습니다. 변경한 다음 그룹을 다시 그룹화합니다.

    플러그인이 마음에 들지 않으면 웹사이트 스토리셋에서 직접 검색할 수 있습니다. 동일한 색상 변경 옵션이 있는 동일한 라이브러리입니다. SVG로 다운로드하여 Figma에 드롭하기만 하면 됩니다.

    플러그인 Illustrations

    당신이 찾고 있는 것이 있다면 그들은 더 많은 스타일과 3번째 삽화를 가지고 있습니다.

    저작권이 있는 한 디자인을 판매하거나 프로토타입에 사용할 수 있는지 100% 확신하기 위해 각 일러스트레이션을 수동으로 확인해야 합니다. 이론적으로 적어도 그들은 모두 무료로 사용할 수 있다고 말하지만 당신은 결코 모릅니다.

    인간 삽화를 찾고 있다면 Humaaans를 확인

    개인적으로 사용한 적은 없지만 일러스트가 꽤 멋져 보입니다.

    보너스 일러스트레이션 라이브러리: 그리기 취소. 저는 몇 년 동안 그것들을 사용해 왔으며 선택할 수 있는 삽화가 많이 있습니다. 완전히 무료로 사용할 수 있습니다.

    요약하자면, Figma에서 사용할 일러스트레이션 팩을 찾고 있다면 undraw, humaaans 또는 undraw와 같은 사이트와 같은 플러그인을 사용할 수 있습니다 . 파일을 SVG로 내보냈는지 확인하십시오. 그렇지 않으면 색상이나 다른 유형의 변경을 할 수 없습니다.

  • 피그마 Config 2023 주요 업데이트 소식

    피그마 Config 2023 주요 업데이트 소식

    개발자 모드(Dev Mode)

    Figma는 개발자를 위해 특별히 설계된 Dev Mode라는 새로운 작업 공간을 도입했습니다. 여기에는 설계와 개발 간의 격차를 해소하는 데 도움이 되는 몇 가지 기능이 포함되어 있습니다.
    이것은 개발자의 요구를 충족하고 플랫폼 내에서 집처럼 느끼도록 하는 것을 목표로 설계된 Figma 내의 작업 공간입니다. Figma는 전통적으로 설계 도구로 여겨져 왔으며 Dev Mode의 도입으로 Figma는 설계와 개발 간의 격차를 해소하고자 합니다.
    Dev Mode는 현재 베타 버전이며 2023년까지 모든 사용자가 무료로 사용할 수 있습니다.

    도구 및 코드베이스에 연결

    Dev Mode를 사용하여 개발자는 Jira, GitHub 및 Storybook과 같은 인기 있는 도구를 포함하여 기존 도구 및 코드베이스와 원활하게 통합할 수 있습니다. 이를 통해 제품 팀과 개발자를 위한 보다 간소화된 워크플로가 가능합니다.

    작업된 내용에서 필요한 항목 추적

    이는 개발자가 최종 제품에서 구현해야 하는 디자인 요소 및 변경 사항을 추적하는 데 도움이 되는 편리한 기능입니다.
    이렇게 하면 생산 단계로 이동할 준비가 된 요소에 대한 명확하고 체계적인 개요를 제공하여 라이브 제품에 대한 변경 및 업데이트 구현 프로세스를 간소화하는 데 도움이 됩니다.

    VS Code에서 Figma를 사용하여 코드와 함께 파일 검사

    이 기능을 통해 개발자는 Visual Studio Code를 사용하여 코딩한 위치에서 바로 디자인 파일을 검토할 수 있습니다. 이것은 디자인과 개발을 더욱 긴밀하게 하여 서로 다른 도구 사이를 전환할 필요성을 줄입니다.
    VS Code용 Figma 확장 프로그램을 사용하면 개발 환경을 벗어나지 않고도 디자인 파일을 탐색 및 검사하고, 디자이너와 협업하고, 변경 사항을 추적하고, 디자인 구현 속도를 높일 수 있습니다. VS Code 확장용 Figma를 사용하여 다음을 수행합니다.

    • 댓글 및 활동을 실시간으로 확인하고 응답합니다.
    • 디자인을 기반으로 코드 제안 받기
    • 코드 파일을 설계 구성 요소에 연결

    변수(Variables)

    이것은 Config의 대규모 업데이트였습니다. 변수를 도입하면 보다 간소화되고 효율적인 설계 프로세스가 가능해집니다. 변수는 디자인 전체에서 재사용할 수 있는 Color, Number, Text 및 부울 값을 저장할 수 있습니다.

    변수의 별칭(alias) 지원

    이 기능을 사용하면 보다 상황에 맞는 변수를 사용할 수 있으므로 전체 팀이 변수를 더 쉽게 이해하고 사용할 수 있습니다.
    별칭을 사용하면 변수에 대해 다른 이름(alias)을 만들 수 있습니다. 이는 프로젝트 내에서 동일한 값을 다른 방식으로 참조할 수 있는 경우에 유용할 수 있습니다.
    예를 들어 어떤 곳에서는 배경색으로, 다른 곳에서는 테두리 색으로 사용되는 기본 브랜드 색상이 있을 수 있습니다. 이들 각각에 대해 별도의 변수를 만드는 대신 색상 값에 대해 하나의 변수를 만든 다음 원래 변수를 참조하는 “Background Color” 또는 “Border Color”과 같은 별칭을 만들 수 있습니다. 이렇게 하면 브랜드 색상이 변경되면 원래 변수만 업데이트하면 모든 별칭에 변경 사항이 반영됩니다.

    변수의 범위(scoping) 지정 지원

    범위 지정은 변수를 사용할 수 있는 컨텍스트를 나타냅니다. 디자인 시스템의 맥락에서 범위는 특정 프로젝트, 프로젝트 내의 특정 페이지 또는 단일 구성 요소일 수 있습니다. 범위 지정은 변수가 적용되는 위치를 명확하게 하여 디자인 시스템의 복잡성을 관리하는 데 도움이 됩니다.
    예를 들어 전체 디자인에서 일반적으로 사용되는 패딩 크기를 정의하는 변수가 있을 수 있습니다. 전역 범위 변수일 수 있습니다. 그러나 특정 구성 요소 내에서 다른 패딩 크기를 원할 수 있습니다. 이름은 같지만 해당 구성 요소로만 범위가 지정된 새 변수를 정의할 수 있습니다. 해당 구성 요소 내에서 패딩 변수를 참조하면 구성 요소 범위 값을 사용합니다. 패딩 변수를 다른 곳에서 참조하는 경우 전역 값을 사용합니다.

    값이 다른 변수 모드

    Figma에서 변수 모드를 사용할 때 각 테마에 대한 변수 집합을 정의할 수 있습니다.
    예를 들어 light-background 및 light-text와 같은 밝은 테마에 대한 색상 변수와 dark-background 및 dark-text와 같은 어두운 테마에 해당하는 변수가 있을 수 있습니다.
    이러한 변수는 색상에만 국한되지 않고 타이포그래피, 간격 또는 특정 요소의 표시를 제어하는 ​​부울 값과 같은 다른 디자인 요소도 포함할 수 있습니다.
    이러한 테마 관련 변수가 정의되면 변수 모드를 전환하기만 하면 디자인에서 테마 간에 쉽게 전환할 수 있습니다. 예를 들어 다크 모드에서 디자인이 어떻게 보이는지 확인하려면 변수 모드를 ‘어두움’으로 전환하기만 하면 테마 변수를 참조하는 모든 디자인 요소가 다크 테마 값을 반영하도록 업데이트됩니다.

    플러그인 및 REST API 지원

    이렇게 하면 변수의 기능이 확장되어 생성 및 관리를 확장할 수 있습니다.
    플러그인 지원을 통해 개발자는 변수와 상호 작용하는 Figma 플러그인을 만들 수 있습니다. 예를 들어 특정 변수를 개체 선택에 적용하는 프로세스를 자동화하거나 디자인 파일에서 변수가 사용되는 방식에 대한 보고서를 생성하도록 플러그인을 설계할 수 있습니다. 이를 통해 반복 작업의 속도를 크게 높이고 일관성을 강화하며 디자인 시스템에 대한 귀중한 통찰력을 제공할 수 있습니다.
    REST API 지원을 사용하면 Application Programming Interface(API)를 통해 Figma의 설계 데이터를 다른 시스템과 통합할 수 있습니다. 즉, Figma의 변수는 Figma 외부에서 프로그래밍 방식으로 액세스하고 조작할 수 있으며 마찬가지로 외부 데이터를 사용하여 Figma의 변수를 업데이트할 수 있습니다.

    고급 프로토타이핑

    훨씬 더 사실적이고 반응이 빠른 방식으로 사용자 입력에 반응하는 프로토타입을 생성할 수 있는 변수, 조건 및 표현식을 사용하여 보다 역동성과 상호 작용으로 디자인에 생명을 불어넣으십시오.

    • 프로토타이핑의 변수(Variables)는 numbers, text, colors, 또는 booleans (true/false)과 같은 값을 보유할 수 있습니다. 이러한 값은 프로토타입 전체에서 사용 및 조작하여 보다 동적인 상호 작용을 생성할 수 있습니다. 예를 들어 변수는 버튼을 클릭한 횟수를 포함하거나 토글 스위치의 현재 상태를 저장할 수 있습니다.
    • 조건(Conditions)을 사용 하면 프로토타입에서 논리를 만들 수 있습니다. 변수의 현재 값을 기반으로 다른 조치 또는 결과를 지정할 수 있습니다. 예를 들어 “버튼을 5번 이상 클릭하면 다른 화면으로 이동합니다”라는 규칙이 있을 수 있습니다.
    • 식(Expressions, Formula)을 사용 하면 변수에 대한 계산 또는 변환을 수행할 수 있습니다. 예를 들어 버튼을 클릭할 때마다 카운터 변수를 증가시키거나 사용자 입력에 따라 새 색상을 계산할 수 있습니다.

    상황에 맞는 편집 및 인라인 미리보기

    이러한 사용성 업데이트를 통해 동일한 보기에서 프로토타입을 편집하고 미리 볼 수 있으므로 디자인 프로세스 속도가 빨라집니다.
    전통적으로 디자이너는 디자인을 변경한 다음 이러한 변경 사항이 프로토타입에서 어떻게 보이는지 미리 보기 위해 다른 보기 또는 모드 간에 전환해야 했습니다. 이것은 특히 피드백이나 테스트를 기반으로 디자인을 반복할 때 시간이 많이 걸리는 프로세스가 될 수 있습니다.
    이 업데이트를 통해 디자이너는 이제 디자인을 변경하고 보기를 전환하지 않고도 이러한 변경 사항이 프로토타입에 어떤 영향을 미치는지 즉시 확인할 수 있습니다. 이 상황에 맞는 편집 및 인라인 미리보기 기능을 사용하면 디자인 변경에 대한 신속한 반복 및 즉각적인 피드백을 허용하여 디자인 프로세스 속도를 크게 높일 수 있습니다.

    자동 레이아웃 개선

    이제 자동 레이아웃 기능을 통해 이전과는 달리 요소가 컨테이너 크기에 반응할 수 있습니다.

    • 래핑(Wrap)은 기본적으로 디자인 요소가 텍스트처럼 흐를 수 있도록 합니다. 수평으로 배열된 요소 그룹이 있고 그룹이 상위 프레임에 비해 너무 넓어지면 요소가 자동으로 다음 행으로 “줄 바꿈”됩니다. 이는 태그 목록의 태그 또는 그리드의 항목과 같이 다양한 양의 콘텐츠 또는 화면 크기에 적응해야 하는 구성 요소를 디자인할 때 특히 유용합니다.
    • 최소 또는 최대 높이/너비(Min or max height/width)는 설계 일관성과 무결성을 유지하는 데 도움이 됩니다. 이러한 제약 조건을 정의하면 요소가 포함하는 콘텐츠나 크기에 관계없이 요소가 너무 작아지거나(읽을 수 없거나 클릭할 수 없게 됨) 너무 커지지 않도록(레이아웃을 버리거나 다른 요소와 겹칠 수 있음) 방지할 수 있습니다. 보고 있는 화면.

    업그레이드된 글꼴 선택기

    새롭고 향상된 글꼴 선택기를 통해 디자이너는 완벽한 글꼴을 그 어느 때보다 빠르고 쉽게 찾을 수 있습니다.

    • 업데이트된 글꼴 선택기에서 검색(Search)하면 디자이너가 이름을 입력하여 찾고 있는 정확한 글꼴을 빠르게 찾을 수 있습니다. 이는 원하는 글꼴을 찾기 위해 목록을 수동으로 스크롤할 필요가 없기 때문에 큰 글꼴 라이브러리로 작업할 때 특히 유용합니다. 이를 통해 디자인 프로세스의 속도를 크게 높이고 다양한 글꼴을 보다 쉽게 ​​실험할 수 있습니다.
    • 필터링(Filtering)은 serif, sans-serif, monospace 등과 같은 특정 기준에 따라 글꼴 목록을 좁힐 수 있는 방법을 제공합니다. 이것은 어떤 글꼴을 사용할지 잘 모르겠고 특정 범주 내에서 몇 가지 옵션을 비교하려는 경우에 매우 유용할 수 있습니다. 올바른 글꼴을 선택하는 과정이 덜 부담스럽고 ​​집중됩니다.
    • 자체 글꼴의 미리보기(Preview font names) 글꼴 이름은 작지만 중요한 업데이트입니다. 이전에는 모양을 확인하기 위해 디자인의 일부 텍스트에 글꼴을 적용해야 했습니다. 이제 글꼴 선택기에서 바로 각 글꼴의 미리보기를 볼 수 있으므로 많은 시간과 클릭 수를 절약할 수 있습니다. 또한 각 글꼴의 특성과 성격이 디자인에 어떻게 부합하는지 한눈에 확인할 수 있습니다.

    파일 브라우저 업데이트

    눈에 띄는 개선 사항 중 하나는 향상된 검색 기능입니다. 새로운 업데이트를 통해 사용자는 특정 키워드나 구문을 사용하여 외부 팀이 공유한 파일 또는 프로젝트를 빠르게 찾을 수 있습니다. 이는 Figma에서 많은 수의 프로젝트를 처리할 때 특히 유용합니다.
    이제 파일 브라우저의 정렬 및 필터링 옵션이 개선되었습니다. 사용자는 마지막 수정 날짜, 파일 소유자 또는 파일을 공유한 팀과 같은 다양한 매개 변수를 기준으로 파일을 정렬할 수 있습니다. 이렇게 하면 더 쉽게 탐색할 수 있고 작업 공간을 체계적으로 유지하는 데 도움이 됩니다.
    또한 새로운 ‘공유 파일’ 섹션이 있습니다. 외부 팀에서 사용자와 공유한 모든 파일과 프로젝트가 함께 그룹화되는 전용 공간입니다. 이렇게 하면 서로 다른 외부 팀과 자주 공동 작업하는 사용자가 더 이상 자신과 공유된 파일을 찾기 위해 자신의 파일을 뒤질 필요가 없기 때문에 상당한 시간을 절약할 수 있습니다.

    Figma, Diagram을 인수!

    Figma는 AI에 대한 투자를 가속화하기 위해 Diagram을 인수했습니다 !
    Figma는 전체 Figma 플랫폼에서 AI 기능을 제공하기 위해 Diagram과 협력할 계획입니다. 이번 인수는 도구의 AI 기능을 향상시키는 중요한 단계임이 분명하며, 현재 기술 산업이 나아가고 있는 방향으로 볼 때 Figma가 일련의 AI 기반 기능을 갖추기 전에는 시간이 없다는 것이 분명합니다.

    개발자 모드의 변경 사항 비교

    개발 모드를 사용하면 프레임이 마지막으로 편집된 시기를 확인하고 버전 기록의 여러 지점에서 변경된 사항을 비교할 수 있습니다. 설계에서 개발로 전달하는 데 여러 번의 반복이 필요한 경우가 있으므로 버전 기록을 통해 설계 변경 사항을 쉽게 추적하고 프로덕션 코드에 업데이트를 정확하게 반영할 수 있습니다.

    • Version history
      저장된 버전과 자동 저장된 버전을 포함하여 파일 기록의 타임라인을 봅니다. 현재 버전과 비교하려면 이전 버전을 클릭하십시오.
    • Side by side 나란히
      프레임의 선택한 버전과 현재 버전을 나란히 보기. 를 사용하여 모달의 확대/축소 설정을 조정합니다.확대하고오른쪽의 축소 버튼.
    • Overlay
      선택한 버전 위에 있는 현재 프레임 버전의 오버레이 보기는 작은 편집 내용을 눈에 띄게 만드는 데 유용합니다. 오른쪽에 있는 슬라이더를 사용하여 현재 프레임의 투명도를 조정하거나가시성을 전환합니다. 를 사용하여 모달의 확대/축소 설정을 조정합니다.확대하고오른쪽의 축소 버튼.
    • View edited layers
      프레임 기록 모달을 사용하면 시간이 지남에 따라 프레임의 레이어가 어떻게 변경되었는지 확인할 수 있습니다. 레이어 변경 사항은 다음 중 하나로 표시됩니다.
      편집됨: 레이어가 현재 버전과 선택한 버전 사이에서 편집되었습니다.
      추가됨: 레이어가 현재 버전과 선택한 버전 사이에 추가되었습니다.
      제거됨: 레이어가 현재 버전과 선택한 버전 사이에서 제거되었습니다.
      목록에서 레이어를 클릭하면 병렬 또는 오버레이 보기에서 업데이트된 구성 요소가 확대됩니다.
    • Compare properties
      편집된 레이어를 선택하면 이전 버전 및 현재 버전에서 할당된 값과 함께 업데이트된 속성이 표시됩니다.
  • 피그마의 12가지 효과적인 팁

    피그마의 12가지 효과적인 팁

    이 글에서는 Figma로 디자인 워크플로를 향상하는 데 도움이 되는 작지만 소중한 트릭과 팁을 공유합니다.

    Option 키로 마우스 오른쪽 버튼을 클릭하면 특정 레이어 선택 가능

    여러 레이어가 있는 프레임에서 작업하고 다른 레이어 뒤에 있는 레이어를 선택하는 것이 때때로 불편할 수 있다. 선택하려는 레이어가 잠겨 있으면 더욱 어려울 수 있다.
    이를 극복하기 위해 선택하려는 레이어에서 Option 키(Windows의 경우 Alt)로 마우스 오른쪽 버튼을 클릭하면 원하는 요소를 선택할 수 있는 메뉴가 열린다.

    의견을 위한 영역 표시

    키보드의 C 키를 누르면 주석을 추가할 수 있다. 그러나 CMD를 누른 상태에서 마우스 왼쪽 버튼을 클릭한 후 마우스를 움직이면 댓글 영역을 만들 수 있어 표시한 영역을 상대방이 볼 수 있다.
    예를 들어 이 팁을 사용하여 디자인 전달 프로세스 중에 둘 이상의 디자인 요소에 대해 개발자에게 의견을 남길 수 있다.

    파일 브라우저를 열려면 헤더의 원을 클릭

    헤더 중앙에 사용자 아이콘이 있는 원을 클릭하면 파일 브라우저와 함께 새 탭이 열리므로 새 Figma 디자인 파일을 열거나 Figma 파일 브라우저에서 다른 작업을 수행할 수 있다.

    계정 전환

    개인 Figma 계정과 직장 Figma 계정 간에 전환할 수 있도록 한 번에 둘 이상의 Figma 계정(예: Gmail)에 로그인할 수 있다.
    아바타 > 계정 전환 > 새 계정 추가를 클릭하여 계정을 추가한 후 계정 전환 메뉴에서 변경할 수 있다.

    자막(closed captions)

    이 뛰어난 기능은 베타 버전의 Figma 데스크톱 앱에서만 사용할 수 있다. 이 기능을 사용하면 Figma에서 사람들과 대화할 수 있으며 캡션이 추가되어 더 잘 이해할 수 있다.
    상대방이 시끄러운 곳에서 말을 하거나 억양이 심한 사람과 대화를 할 때 도움이 될 수 있다.
    베타 켜는 방법: Figma 데스크톱 앱 > 설정 > 새 기능 열기 > 베타를 켜서 사용해보자.

    특정 버전 기록 저장

    우리 작업은 Figma에 의해 자동 저장되지만 특정 버전을 저장하고 싶다면 저장하고 이름을 지정할 수 있다. 무언가를 테스트하고 이전에 저장된 버전으로 돌아가고 싶을 때 유용하다.
    방법: 메뉴 > 파일 > 버전 기록에 저장.

    Figma 파일 다운로드

    Figma는 클라우드에서 잘 작동하지만 추가 보안을 원할 경우 컴퓨터에 파일을 다운로드할 수 있다.
    방법: 메뉴 > 파일 > 로컬 사본 저장

    배율(Scale) 도구

    개체의 크기를 조정해야 한다면 상단 표시줄에서 크기 조정 도구(단축키 k)를 클릭하고 개체 크기를 조정한다. 오른쪽 메뉴의 입력을 사용하면 원하는 만큼 정확하게 입력할 수 있다.

    파일을 즐겨찾기로 추가

    새 파일을 작업하고 즐겨찾기로 추가하고 싶다면, 머리글에서 펼침 아이콘을 클릭하고 “이 파일을 즐겨찾기에 추가”를 선택한다.
    이렇게 하면 파일 브라우저의 파일 목록 상단에서 직접 파일을 선택할 수 있다. 예를 들어 디자인 시스템에서 작업하는 경우 UI 키트를 즐겨찾기로 표시하면 도움이 될 수 있다.

    색상 입력란에 색상 이름(color name)을 적는다.

    Figma에 빠른 메모를 추가하고 색상 팔레트 메뉴를 열지 않으려면 입력에 색상 이름을 직접 입력할 수 있다.

    픽셀(Pixel) 미리보기

    픽셀 보기를 켜고 끄고 두 배 크기로 작업할 수 있다. 오른쪽 상단 헤더의 백분율을 클릭한 다음 픽셀 미리보기를 클릭하면 된다.

    출시 노트(release notes) 읽기

    릴리스 노트를 읽는 것이 이상하게 보일 수 있지만 Figma의 새로운 기능을 배울 수 있는 좋은 방법이다. 이러한 방식으로 앱에 새 기능이 추가될 때마다 항상 최신 상태를 유지한다.

    메뉴> 도움말 및 계정> 릴리스 정보를 클릭한다.

  • 버튼 디자인 기본 원칙

    버튼 디자인 기본 원칙

    아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.

    Button : “submit”, “merge”, “create new”, “upload” 등과 같은 작업을 수행할 때 사용된다.
    Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
    Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)

    버튼의 상태(states)

    버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나이다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스(Affordance)가 있어야 하지만 구성 요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안 된다.

    버튼에 알아볼 수 있는 디자인 사용

    사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.

    디자인은 우선순위와 관련되어야 한다.

    버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.

    버튼 구조 이해

    기본 구조 요소 : Text label, Border, Background, Icon
    보조 요소 : Border radius, Padding, Gutter, Effects

    색상 심리 적용

    색상은 버튼의 용도와 상대적 중요성을 나타내는 효과적인 도구이다.
    우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.

    사용자가 찾을 것으로 예상되는 위치에 배치

    버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다.
    사용자가 버튼을 찾도록 유도 하지 말아야 한다.

    Tip : 항상 접힌 부분 위에 버튼을 놓는다.

    각 버튼의 기능을 명확하게 표시

    일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.

    스마트폰용 손가락 친화적인 버튼 만들기

    MIT Touch Lab* 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다.
    이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.

    버튼을 적절하게 간격두기

    이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.

  • 모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 접근 방식은 말 그대로 가장 작은 화면에 맞게 디자인하고 작업을 진행하는 것이다. 반응형(Responsive) 또는 적응형 디자인(Adaptive design)을 만드는 가장 좋은 전략 중 하나이다.

    • 모바일 우선 접근 방식은 점진적 향상(progressive enhancement)의 주안점이다. 모바일 디자인은 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념이다. 모바일 디자인 질문에 대한 답을 얻으면 다른 장치를 위한 디자인이 더 쉬워진다. 요약하자면 가장 작은 디자인에는 필수 기능만 있을 것이므로 즉시 UX의 핵심을 디자인한 것이다.
    • 반대 접근 방식은 단계적 저하(graceful degradation)이다. 이것은 처음부터 모든 복잡성을 통합하고 나중에 더 작은 장치를 위해 제거한다. 단계적 저하의 문제는 처음부터 모든 포괄적 디자인을 구축할 때 핵심 요소와 보조 요소가 병합되어 구별 및 분리가 더 어려워진다는 것이다. 전체 철학은 경험을 “축소”하고 있기 때문에 모바일 디자인을 사후 고려 사항으로 취급할 위험이 있다.

    우리는 다른 사람들과 함께 모바일 우선 접근 방식을 통한 점진적 개선을 강력히 권장한다. 이 게시물에서는 팁과 기술을 설명하고 모바일 우선 워크플로를 사용하여 가상의 웹사이트를 구축하는 실습 강의로 마무리한다.

    모바일 우선(Mobile-First) = 콘텐츠 우선(Content-First)

    귀하의 사이트가 모바일 장치에서 좋다면 모든 장치에서 더 잘 해석된다. 하지만 더 중요한 것은 모바일 우선 접근 방식이 콘텐츠 우선 접근 방식이기도 하다는 것이다. 모바일에는 몇 가지 예를 들자면 가장 많은 제한 사항, 화면 크기 및 대역폭이 있으므로 이러한 매개 변수 내에서 디자인하면 무자비하게 콘텐츠의 우선 순위를 지정해야 한다는 것이다.

    모바일 우선 접근 방식은 유기적으로 더 콘텐츠 중심적이며 따라서 사용자 중심적인 디자인으로 이어진다. 사이트의 핵심은 콘텐츠이다. 바로 이것이 사용자가 존재하는 이유이다.

    그러나 한 가지 주의할 점은 모바일 사용자는 때때로 데스크톱 사용자와 다른 콘텐츠가 필요하다는 것이다. 기기별 콘텐츠는 컨텍스트를 고려하여 측정할 수 있다. 즉, 주어진 상황과 주어진 환경에서 사용자가 더 높이 평가할 사항은 무엇인지? 이를 미리 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것이다.

    이동하는

    모바일 우선 접근 방식의 또 다른 이점은 작은 화면 중단점(breakpoints)이 콘텐츠 주위에 더 잘 맞을 수 있다는 것이다. 다시 말하지만, 대안은 더 나쁘다. 이미 통통한 디자인을 작은 프레임워크에 짜넣어야 하는 것이다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠 주변에 자연스럽게 중단점(breakpoints)이 생성되므로 어색한 편집이 필요하지 않는다.

    모바일 우선 설계 프로세스

    우리는 Figma 에서 디자이너를 돕는 프로세스를 설명할 것이다.

    평소와 같이 와이어프레임은 레이아웃을 가장 효율적으로 구성하기 위해 권장되는 초기 단계이다. 와이어프레이밍이나 프로토타이핑을 할 때 반응형 중단점(breakpoints) 메뉴를 사용하여 가장 작은 것부터 시작하여 다양한 화면 크기로 이동하는 프로세스를 간소화한다.

    UXPin의 반응형 웹사이트 디자인

    이러한 사전 설정은 적절한 화면 크기를 레이아웃하므로 콘텐츠만 염두에 두고 와이어프레임할 수 있다.

    절차는 다음 단계를 따른다.
    1. 콘텐츠 인벤토리(Content Inventory) — 포함하려는 모든 요소가 포함된 스프레드시트 또는 이에 상응하는 문서이다.

    UXPin을 사용한 모바일 퍼스트 디자인

    출처: Maadmob

    2. 시각적 계층 구조(Visual Hierarchy) – 콘텐츠 인벤토리의 요소에 우선 순위를 지정하고 가장 중요한 요소를 눈에 띄게 표시하는 방법을 결정한다.

    3. 가장 작은 중단점(breakpoints)으로 디자인한 다음 확장 — 모바일 와이어프레임을 먼저 구축한 다음 이를 더 큰 중단점(breakpoints)의 모델로 사용한다. 공백이 너무 많이 생길 때까지 화면을 확장한다.

    4. 터치 대상 확대 — 손가락은 픽셀 단위의 정확한 마우스 커서보다 훨씬 넓기 때문에 탭할 더 큰 요소가 필요하다. 이 글을 쓰는 시점에서 Apple은 터치 대상에 대해 44픽셀 정사각형을 권장한다. 하이퍼링크에 충분한 공간을 제공하고 버튼을 약간 확대하고 모든 대화형 요소 주위에 충분한 공간이 있는지 확인하자.

    5. 호버링에 의존하지 말자 — 거의 당연한 이야기지만 디자이너는 종종 인터랙티브 작업에서 호버 및 마우스오버 효과에 의존한다. 모바일 친화적이라고 생각한다면 하지 않는것이 좋다. 아직 손끝에 대한 호버 컨트롤이 없다.

    6. “APP”을 생각하라 — 모바일 사용자는 경험의 움직임과 약간의 제어에 익숙하다. 캔버스 외부 탐색 , 확장 가능한 위젯, AJAX 호출 또는 사용자가 페이지를 새로 고치지 않고도 상호 작용할 수 있는 화면의 기타 요소에 대해 생각해 보자.

    7. 큰 그래픽 피하기 — 가로 사진과 복잡한 그래픽은 화면 너비가 몇 인치에 불과할 때 잘 표시되지 않는다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자를 수용한다.

    8. 실제 장치에서 테스트 — 웹사이트가 얼마나 유용한지(또는 그렇지 않은지) 스스로 발견하는 것보다 좋은 것은 없다. Desktop/Notebook 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로드해보자. 페이지를 탭하고, 사이트 탐색이 쉬운지~? 적시에 로드되는지~? 텍스트와 그래픽이 읽기 쉬운지~?

    이것은 단지 기본 개요이다. 프로세스에 대한 전체 가이드를 보려면 반응형 디자인을 위한 무료 콘텐츠 와이어프레임을 다운로드해서 확인해 보자.

    Mobile-First 설계 튜토리얼

    장치마다 화면 크기와 방향에 따라 다른 레이아웃이 필요하다는 점을 감안할 때 사용자를 위해 여러 배열을 디자인하는 것이 좋습니다. 운 좋게도 Figma에서 바로 반응형 또는 적응형 변형을 만들 수 있다.

    예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법을 설명한다. 계속해서 예제를 만들고 아래를 따라해 보자.

    콘텐츠 우선 순위 설정

    “모바일 우선 접근”은 “데스크톱 우선”과 다르다. 더 작게 디자인할 때 잘라내지 않고 점차적으로 더 큰 레이아웃에 정보를 추가한다. 모바일을 생각한다는 것은 정보를 제거한다는 의미가 아니다. 정보를 1차, 2차, 3차 콘텐츠로 분류하는 것을 의미한다.

    이 예에서 우리는 홈 페이지에 회사 이름 및 제품 링크와 같은 특정 요소가 있어야 한다는 것을 알고 있다. 블로그 게시물도 나쁘지 않을 것이다. 그러나 우리가 말했듯이 모든 것이 스마트폰 보기에 맞지는 않으므로 사이트의 목표인 자전거 판매를 달성할 수 있는 항목에 따라 우선 순위를 설정한다.

    1. 최신형 자전거

    2. 베스트 셀러 바이크

    3. “나에게 딱 맞는 라이드 찾기” CTA

    4. 회사명 및 히어로 이미지

    5. 내비게이션

    6. 검색

    7. 두 번째로 많이 팔린 자전거

    8. 상품권

    9. 추천서

    10. 최신 블로그 게시물

    주문한 목록을 기반으로 우리의 작업이 판매를 얻는 디자인 문제를 해결할 것이라는 확신을 가지고 만들 수 있다.

    스마트폰 보기

    사용자는 얼마나 필요할까~?

    모바일 우선을 생각하면 무엇이 정말 중요한지 생각하게 한다. 이 스마트폰 보기에서 가장 많이 팔린 자전거와 최신 모델은 판매로 직접 연결되므로 상품권, 덜 인기 있는 모델, 최신 뉴스와 같은 다른 항목을 내부 페이지에 남겨둘 수 있다. 마지막 클릭 유도문안은 특히 눈에 잘 띄며 손가락을 한 번만 탭하면 쉽게 칠 수 있다.

    태블릿 보기

    태블릿 크기의 보기용으로 디자인할 때 추가 제품(예: “축전기”)과 같은 2차 정보를 더 잘 추가할 수 있다. 또한 페이지 상단의 탐색을 확장하고 실제로 판매로 이어지지 않고 판매를 장려하는 콘텐츠, 즉 고객 평가를 추가할 수 있다.

    더 많은 옵션을 사용할 수 있기 때문에 스마트폰 UI에 무엇을 포함할지 결정하는 것보다 훨씬 더 어려울 수 있다. 2차 요소와 3차 요소의 차이는 모호한 선이고 모든 것을 포함하고 싶은 유혹이 강하다.

    충동에 저항해보자~ 정렬된 콘텐츠 목록을 사용한다. 스마트폰과 마찬가지로 공간은 여전히 ​​제한적이다.

    데스크탑 보기

    마지막으로 데스크탑 보기는 중요하다고 결정한 만큼 많은 정보를 지원할 수 있다. 여기에서 홈 페이지는 적합 여부에 관계없이 적합하다고 생각하는 모든 정보를 수용할 수 있다. 포함된 몇 가지 추가 콘텐츠를 확인해 보자.

    • 상품권
    • 고객 평가
    • 최신 Lightning Bolt 자전거 탐색 블로그 게시물

    장치에 적합한 레이아웃을 직접 디자인하기

    Figma을 사용하는 경우 이러한 보기에 대해 다른 레이아웃을 만드는 것은 상당히 쉽다.

    1. Figma 프로토타입을 연다.
    2. Figma 편집기의 오른쪽 하단에 있는 “새 적응형 버전 추가”를 탭합니다.UXPin 캔버스 설정
    3. 미리 설정된 크기를 선택하거나 고유한 크기를 입력합니다.
      UXPin의 반응형 웹사이트 디자인
    4. 처음부터 모든 것을 다시 만들 필요는 없다. 디자인 요소를 복사할 크기를 선택한다.
      UXPin 앱 디자인 및 프로토타입

    캔버스 위의 다양한 크기를 탭하여 중단점(breakpoints) 사이를 전환하고 필요에 맞게 각각을 조정한다. 모바일 우선 프로토타이핑을 직접 시도하고 싶다면 Figma에서 시작해 보자.

    원문 : A Hands-On Guide to Mobile-First Responsive Design

  • 빠른 UI 레이아웃을 위한 속독법

    빠른 UI 레이아웃을 위한 속독법

    • 가로(Horizontal), 세로(Vertical), 혼합(Mixed)의 흐름을 구분 짖는다.
    • 그에따른 각 섹션에 화살표로 방향을 정의한다.
    • 방향에 따른 개별 덩어리를 나눠 구분한다.
    • 섹션별 흐름의 우선순위를 결정한다.
    • 최대한 눈의 움직임을 단순하게 처리한다.
    • Visual path 기법을 통한 분석 적용 ( Gutenberg Diagram, Z-pattern and F-pattern)
    • 흐름에 맞게 전략과 콘텐츠를 채워나간다.
    • 각각의 그룹 컨테이너의 흐름에 강조할 그룹을 정의한다.

    데스크톱

    LSR(Layout Speed Reading) for Desktop

    모바일

    LSR(Layout Speed Reading) for Mobile
  • 모바일 디자인이 우선 되어야 하는 이유

    모바일 디자인이 우선 되어야 하는 이유

    연구에 따르면 약 94%의 사람들이 반응형 웹 디자인을 기반으로 웹사이트를 판단한다. 모바일 우선 디자인이 향후 몇 년 동안 최우선 순위가 되어야 하는 이유를 알아보자.

    Mobile First 디자인이란 무엇인가?

    모바일 퍼스트 디자인은 가장 작은 화면을 위한 디자인을 의미한다. 가장 중요한 것은 여러분의 웹사이트가 모바일 장치에서 잘 작동한다면 다른 장치에서도 더 잘 작동할 것이다.

    모바일 우선 디자인은 콘텐츠 우선 디자인을 의미한다. 그것은 당신이 당신의 공간을 현명하게 사용하도록 강요하고 모든 요소에 적합한 장소를 찾을 수 있도록 한다. 모든 것이 전화를 보는것 처럼 맞는 것은 아니므로 사이트의 목표를 달성할 수 있는 항목에 따라 우선 순위를 설정해야 한다. 의미없는 끝없는 텍스트는 잊어 버리기 바란다. 기본적으로 좋은 결과를 원한다면 가장 가치 있는 콘텐츠만 남게 된다.
    따라서 현명하게 생각하고 계획을 세우거나 전문가의 도움을 요청해야 한다.

    Mobile First와 Mobile Responsive 디자인의 차이점은 무엇인가?

    웹 디자인 세계에는 두 가지 이데올로기가 있다. 하나는 점진적 향상/progressive enhancement(mobile-first)이라고 하고 다른 하나는 단계적 저하/graceful degradation(desktop first)이다. 점진적 향상 이데올로기는 웹 사이트가 먼저 더 작은 장치에 맞게 설계되어야 하고 개발자는 더 큰 화면에 맞게 조정해야 한다는 것을 의미한다. 다른 하나는 반대로 말한다. 처음에는 데스크탑용으로 사이트를 디자인한 다음 더 작은 화면에 맞게 조정해야 한다.

    모바일 사용자가 웹 사이트에 점점 더 많은 트래픽을 가져옴에 따라 점진적 향상 이데올로기가 대중화되고 있다. 단계적 저하의 문제는 처음부터 모든 포괄적인 디자인(All-Inclusive Design)을 구축할 때 요소가 병합되어 강조하고 분리하기가 더 어려워진다는 것이다.

    By Stéphanie Walter – Based on Responsive Strategy by Brad Frost

    어떤 전략을 사용해야 하나?

    지난 6년 동안 전 세계 휴대전화 사용자 수는 41억 명에서 493명으로 거의 10억 명으로 늘어났습니다. 얼마 지나지 않아 Google은 Mobile-First Sites가 더 높은 순위를 차지할 것이라고 발표했다.

    스스로에게 질문해보자. 타겟 고객은 무엇을 사용하고 있나? 그들은 PC 애호가인가? 아니면 웹사이트에 있을 때 스마트폰을 사용하는 것을 선호하나? 일부 B2B 회사는 여전히 PC를 사용하는 수많은 클라이언트를 보유하고 있다.
    그것을 보는 방법을 잘 모르겠다면 Google Analytics를 사용하여 시작해보자. 청중을 더 잘 알게 되는 것이다. 그들이 사용하는 기기, 성별, 출신 국가, 사이트에서 보내는 시간 등을 볼 수 있다.

    Mobile First 전략의 이점

    인터넷 트래픽의 57.88% 가 휴대전화를 통해 이루어지며 전문가들은 최대 75% 까지 증가할 것으로 예측한다. 이는 과소 평가되지 않는다.

    첫인상은 바꾸기 어렵고, 고객들은 웹사이트가 좋지 않으면 회사를 판단하는 경향이 있다.

    모바일 우선 접근 방식으로 웹사이트를 조정할 경우 얻을 수 있는 이점은 다음과 같다.

    • 모바일 장치에서 최고의 사용자 경험
    • Google은 모바일 우선 색인을 사용한다.
    • 더 빠른 웹사이트
    • 내장된 전화 기능을 사용하도록 웹사이트 디자인 가능
    • 미래에 대한 투자
    Share of 57.88%
  • 피그마 이미지 파일 최적화 방법

    피그마 이미지 파일 최적화 방법

    디자인 파일에 이미지를 추가하여 사진, 스크린샷 또는 기타 시각적 Assets을 디자인에 통합한다. Figma 는 PNG , JPEG , HEIC , GIF 및 WEBP 이미지 형식을 지원한다.

    Figma에는 이미지에 대한 특정 레이어 타입이 없으며 대신 이미지는 Fill 타입이다. 이를 통해 모든 모양 또는 벡터 네트워크에 이미지를 추가할 수 있다.

    오른쪽 사이드바의 Fill 섹션에서 이미지 채우기를 보고 업데이트 한다. Figma는 견본과 Image레이블에 있는 이미지의 썸네일을 표시한다.

    왼쪽 사이드바의 Layer 패널에서 이미지 채우기로 레이어를 식별할 수도 있다.

    • 캔버스에 이미지를 바로 추가하면 Figma는 캔버스에 원본 파일의 크기로 직사각형을 생성한다. 이미지 아이콘 및 Image레이블이다.
    • 기존 개체에 이미지를 추가하면 Figma는 레이어 아이콘과 원본 레이어의 설명을 사용한다.

    파일에 이미지 추가

    이미지는 채우기이므로 모든 벡터 또는 모양에 추가할 수 있다. 이를 통해 유연성과 제어력이 향상된다. 디자인 파일에 이미지를 추가하는 방법에는 여러 가지가 있다.

    • 컴퓨터에서 캔버스로 이미지 파일을 끌어다 놓는다. Figma는 이미지 크기의 새 직사각형을 만들고 이미지를 채우기로 적용한다.
    • 이미지 파일을 파일 브라우저로 가져온다. Figma는 이미지가 직사각형으로 추가된 프로젝트에서 새 디자인 파일을 생성한다.
    • 장소(Place)를 사용하여 디자인에 여러 이미지를 일괄 추가한다. 이미지를 추가할 레이어를 선택한다. 일괄 이미지 배치 →
    • 색상 선택기에서 이미지 가져오기를 사용한다. 이미지 채우기 업로드 →
    • 현재 파일의 다른 레이어나 다른 파일에서 이미지를 복사한다. 레이어 간 이미지 복사 및 붙여넣기 →
    • 클립보드의 이미지를 캔버스에 붙여넣는다. 다운로드 및 업로드 없이 웹에서 이미지를 복사한다. 캔버스에 이미지 붙여넣기 →

    이미지 편집

    이미지를 편집하거나 조정하는 방법에는 여러 가지가 있다.

    • 이미지가 있는 모든 레이어의 크기 조정(scale), 회전(rotate) 및 수정(adjust)
    • 레이어에 적용된 이미지 자르기(crop) 및 재배치(re-position)
    • 채우기 모드(fill mode), 회전(rotation) 및 혼합 모드(blend mode)를 포함한 이미지 옵션 조정
    • 스타일(Styles) 및 구성 요소(Components)에 이미지 포함
    • 마스크(Masks)를 적용 하여 이미지의 일부만 표시
    • 색조(Hue), 채도(Saturation) 또는 대비(Contrast) 변경과 같은 이미지 조정
  • 피그마 컴포넌트 네이밍 및 구성

    피그마 컴포넌트 네이밍 및 구성

    팀이나 회사 내에서 components 구조를 정의하고 문서화하는 것이 좋다.

    이렇게 하면 Assets 패널에서 components를 더 쉽게 찾을 수 있다. 그뿐만 아니라 관련 components instances를 교체한다.

    Components를 구성하는 방법에는 여러 가지가 있다. Assets 패널 및 관련 components의 components를 구성하는 방법을 보도록 하자.

    Assets 패널

    파일의 components에 액세스하는 가장 빠른 방법은 Asset 패널을 사용하는 것이다.

    Asset 패널을 열려면 다음을 수행한다.

    • 왼쪽 사이드바에서 Asset 탭을 클릭한다.레이어 패널의 자산 탭
    • 또는 키보드 단축키를 사용합니다.
      •  : ⌥ Option + 2
      • 윈도우 :  Alt + 2
    구조

    Asset 패널에서 다음 components에 액세스할 수 있다.

    • 로컬 구성 요소(Local Components) : 이 파일에서 생성한 components이다.
      • 이 파일에 비공개(Private) : 이 파일에서 생성했지만 팀 라이브러리에 게시하지 않은 components이다.
    • 이 파일에서 사용됨 : 이 파일에서 이미 사용한 다른 라이브러리의 components이다.
    • 활성화된 라이브러리 : 팀(Team)  또는  조직(Organization)에서 누구나 활성화한 기본 라이브러리이다.

    Assets 패널에는 이러한 각 섹션에 대한 제목이 있다. 파일 이름을 제목으로 하여 활성화된 모든 라이브러리를 나열한다. 제목을 축소하여 차지하는 공간을 줄일 수 있다. 또는 확장하여 해당 파일 내의 components를 탐색한다.

    로컬, 파일 및 라이브러리 구성 요소에 대한 자산 패널의 드롭다운
    라이브러리 파일 탐색

    파일 구조를 미러링 하는 경로에 components를 표시한다. 파일 경로는 다음과 같은 일반 구조를 따른다. file > page > frame

    경로의 각 단계는 Asset 패널의 제목을 나타낸다. 화살표를 사용하여 파일 경로를 확장하고 각 프레임 내의 components를 탐색할 수 있다.

    원본 파일의 순서가 아닌 알파벳 순서로 페이지를 표시한다.

    파일 내의 구성 요소를 표시하는 자산 패널의 확장 메뉴

    관련 components

    Design tab의 Instance 섹션에서 선택한 components를 볼 수 있다.

    이를 사용하여 파일을 떠나지 않고 관련 components 간에 전환할 수 있다.

    우리는 다음을 통해 관련 components를 결정한다.

    • Components의 이름을 지정하는 방법이다. 예를 들어 우리는  UI/Button/Active,  UI/Button/Hover 그리고  UI/Button/Inactive 함께 표시할 것이다.
    • 원본 파일에서 components를 정렬한 방법이다. 예를 들어 우리는 관련 components와 동일한 프레임 내의 모든 components를 취급한다.
    Component_order_using_slash_naming_convention.png

    예제

    Components 이름

    조직의 다른 계층을 추가하려는 경우 특정 방식으로 components의 이름을 지정할 수 있다. Component/State와 같이 슬래시로 구분된 규칙을 사용하는 것이 좋다.

    다음과 같이 프레임에서 components의 이름을 지정했다고 가정해 보겠다.

    • Login/Active
    • Login/Hover
    • Login/Inactive
    • Create/Active
    • Create/Hover
    • Create/Inactive

    일괄 레이어 이름 변경 방법 알아보기 →

    Components 구성

    이 예에서는 위치를 기반으로 components를 구성했다. 페이지와 프레임을 사용하여 components를 그룹으로 구성했다.

    • Figma UI 파일에는  Figma UI를 구성하는 components가 있다.
    • Left Sidebar에 대한 페이지를 만들었다. 페이지에는 해당 사이드바와 관련된 모든 components가 있다.
    • left sidebar는  Layers 패널과  Assets 패널의 두 가지 기본 패널로 구성된다. 이러한 패널 각각에 대한 프레임을 만들었다.
    • 각 아이콘에 대해  16px  및  32px의 두 가지 크기를 지원한다. 각 프레임에 두 아이콘 세트를 모두 추가한다.
    • 아이콘 크기를 쉽게 구별할 수 있도록 components의 이름을 지정한다. Layers 패널에서 슬래시 규칙을 사용하여 각 components의 이름을 지정한다(예: 16 / Team Library  또는  32 / Team Library ).
    크기가 다른 동일한 구성 요소에 대해 별도의 드롭다운 메뉴를 표시하는 자산 패널

    닫기 아이콘이 필요한 대화 상자 창을 다른 파일에 만들었다. Assets 패널에 대해 이미 이 중 하나를 만들었으므로 다시 사용할 수 있다.

    해당 components의 32px 버전이 필요하다. Assets 패널에서 찾으려면 다음으로 이동한다. Figma UI / Left Sidebar / Assets Panel / 32

    그런 다음 Assets 패널에서 해당 components를 파일로 드래그할 수 있다.

    자산 패널에서 캔버스의 프레임으로 드래그 되는 구성 요소 인스턴스
  • 피그마 인터랙티브 컴포넌트

    피그마 인터랙티브 컴포넌트

    대화형 구성 요소 정보

    대화형 구성 요소를 사용하면 구성 요소 집합의 변형 간에 프로토타입 상호 작용을 만들 수 있다. 디자인에 인스턴스를 추가할 때마다 이러한 상호 작용이 설정되고 사용할 준비가 된다. 이것은 프로토타입을 만들 때 시간을 절약하고 불필요한 국수 스프를 방지한다.

    • 호버에서 눌린 상태로 변경되는 버튼과 같이 변형 간에 자동으로 전환되는 대화형 요소를 만든다.
    • 구성 요소 수준에서 기본 상호 작용을 설정하고 프로토타입을 구축할 때 추측을 제거한다.
    • 체크박스 또는 토글 세트와 같은 입력 필드를 프로토타이핑하는 데 필요한 프레임 및 연결의 양을 줄인다.

    Before

    아래 예에서 우리는 5개의 체크박스가 있는 프레임을 프로토타입하기 위해 가능한 모든 연결을 추가했다. 대화형 구성 요소가 없으면 가능한 모든 조합의 프로토타입을 만들기 위해 동일한 프레임을 32번 복제하고 둘 사이에 160개의 연결을 만들어야 한다.

    여러 확인란이 있는 프레임에 대한 연결 만들기

    After

    대화형 구성 요소를 사용하면 확인란의 인스턴스를 디자인에 추가하기만 하면 변형 상호 작용이 준비된다. 우리가 프로토타입을 볼 때 Figma는 자동으로 체크된 변형과 체크되지 않은 변형 사이를 전환한다.

    확인란 대화형 구성 요소를 사용하여 여러 확인란이 포함된 프레임 프로토타입 만들기

    대화형 구성 요소(Interactive components) 만들기

    동일한 component set의 variant을 사용하여 대화형 구성 요소(interactive components)만 만들 수 있다. 작업할 component set이 없으면 먼저 component를 만들어야 한다. Variants 생성 방법 알아보기 →

    Variant interactions 생성

    대화형 구성 요소에 새로운 Prototype actionChange to로 변경한다.

    1. Component set 내에서 상호 작용의 시작 variant을 선택한다.
    2. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
    3. 프레임의 경계 상자 오른쪽에 있는 ‘‘을 클릭하고 대상 변형으로 드래그한다. Prototype 패널의 Interactions 섹션에서 ‘+’를 클릭하고 작업을 Change to로 설정 한 다음 드롭다운 메뉴를 사용하여 대상 변형을 선택한다.
    4. 연결이 완료되면 Interaction details 패널을 사용하여 trigger 및 action을 조정한다.
    변형 상호 작용을 생성할 때 프로토타입 탭에서 구성 요소 집합

    대화형 구성 요소 사용

    다른 구성 요소와 마찬가지로 디자인에 대화형 구성 요소의 인스턴스를 추가한다. 유일한 차이점은 인스턴스에 이미 프로토타입 제작에 적용된 상호 작용이 있다는 것이다.

    대화형 구성 요소를 사용하려면:

    1. 디자인의 프레임에 대화형 구성 요소의 인스턴스를 추가한다.
    2. 디자인의 프로토타입을 만들 준비가 되면 오른쪽 사이드바 의 Prototype 탭으로 이동 한다.
    3. 프로토타입을 구축한다.
    4. 프레젠테이션 보기에서 디자인 및 상호 작용을 미리 본다.

    더 많은 상호 작용(interactions) 추가

    대화형 구성 요소(interactive components)로 프로토타입을 구축할 때 variant interactions 위에 일반 상호 작용을 추가할 수 있다.

    아래 예에서는 지연이 있는 variant interactions 위에 클릭 trigger가 있는 상호작용을 추가했다.

    프로토타입 탭의 상호작용 및 변형 상호작용 섹션

    상호 작용 순서는 사용하는 트리거가 variant interactions과 동일한 트리거인지 여부에 따라 달라진다. Prototype triggers에 대해 자세히 알아보기 →

    동일한 트리거(triggers)

    두 상호 작용이 동일한 트리거를 사용하는 경우 Figma는 프로토타입 상호 작용을 사용하고 변형 상호 작용을 무시 한다.

    예를 들어:

    1. 토글 스위치에는 구성 요소 세트 의 On 및 Off 변형(variants) 간에 On click → Change to 변형 상호 작용이 있다.
    2. 토글 스위치에서 다른 프레임으로 On click → Navigate to 상호 작용을 추가한다 .

    사용자가 토글 스위치를 클릭하면 Figma가 다음 프레임으로 이동한다.

    다른 트리거(triggers)

    다른 트리거와의 상호 작용을 추가하면 Figma는 상호 작용과 변형 상호 작용을 모두 재생한다.

    예를 들어:

    1. 버튼에는 default 변형 과 hover 변형 간에 On hover → Change to 변형 상호 작용이 있다.
    2. 프로토타입을 만들 때 On click → Navigate to 상호작용을 추가한다.


    Figma는 hoverChange to 호버 변형 후 다음 프레임 On click 에서 Navigate to 한다.

    상호작용 보기

    대화형 구성 요소를 사용할 때 오른쪽 사이드바의 Prototype 탭에서 Interactions 및 Variant interactions 에 대한 별도의 섹션을 볼 수 있다.

    Variant interactions 수정

    기본 component에서 variant interaction을 추가하고 편집한다. 인스턴스에서는 variant interaction을 편집할 수 없다.

    인스턴스에서 component set에 액세스하고 편집하려면:

    1. 인스턴스를 선택한다.
    2. 오른쪽 사이드바의 Instance 섹션에서 ‘?’ 아이콘을 클릭한다.
    3. 메인 component 이동을 선택 한다.
    4. 오른쪽 사이드바의 Prototype 탭으로 이동 한다.
    5. Variant interactions을 수정한다.

    사용자 정의 글꼴이 있는 대화형 구성 요소

    대화형 구성 요소 내부의 텍스트에 사용자 정의 글꼴을 사용할 때 프로토타입 뷰어의 장치에 해당 사용자 정의 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하자. 이러한 경우 Figma는 프로토타입을 제시할 때 사용자 정의 글꼴을 올바르게 표시하기 위해 대화형 구성 요소의 변형에 대한 캐시된 정보를 사용하지만 텍스트 재정의를 유지하고 상호 작용에 대한 글꼴 설정을 변경할 수 없는 경우 글꼴을 Inter로 대체할 수 있다.

    예를 들어 프로토타입을 보고 있는 사람이 자신의 장치에 사용 중인 사용자 정의 글꼴이 설치되어 있지 않다고 가정해 보겠다. 대화형 구성 요소의 인스턴스에 텍스트 재정의가 있는 경우:

    • 변형 변경에 가중치 또는 밑줄과 같은 글꼴 설정 변경이 포함되는 경우 Figma는 사용자 정의 글꼴을 Inter로 대체할 수 있다.
    • 변형의 변경이 버튼의 배경색과 같은 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시한다.

    디자인에서 사용자 정의 글꼴에 액세스할 수 없는 뷰어와 공유되는 프로토타입에는 Google 글꼴 을 사용하는 것이 좋다. 팀이 Figma Organization 플랜을 사용 중인 경우 공유 글꼴로 업로드하여 모든 프로토타입 뷰어가 프로토타입의 사용자 정의 글꼴에 액세스할 수 있도록 할 수 있다.

    파일에 대해 대화형 구성 요소 끄기 또는 켜기

    특정 파일에 대해 대화형 구성 요소를 끄거나 켤 수 있다. 이렇게 하려면:

    1. 키보드 단축키를 사용하여 빠른 작업 검색 창을 연다.
      • 맥: ⌘ Command + / 또는 ⌘ Command + P
      • Windows: Control + / 또는 Control + P
    2. Enable interactive components 검색.
    3. ReturnEnter을 누르고 확인란을 클릭하여 대화형 구성 요소를 전환한다.
    출처: Interactive components in Figma
  • 피그마 Variants

    피그마 Variants

    구성 요소(Component)를 만들고 설계 시스템을 구축할 때 약간의 차이점만 제외하고 서로 유사한 구성 요소가 필요하다는 것을 알게 될 것이다.

    예를 들어 버튼에 대해 여러 구성 요소가 있을 수 있으며 다양한 상태 및 크기와 밝은 모드 및 어두운 모드에 대한 별도의 구성 요소가 있을 수 있다.

    변형(Variants)을 사용하면 유사한 구성 요소를 단일 컨테이너로 그룹화하고 구성할 수 있다. 이렇게 하면 구성 요소 라이브러리가 단순화되고 모든 사람이 필요한 것을 더 쉽게 찾을 수 있다.

    변형의 속성과 값을 사용자 지정하여 디자인 시스템에서 추측을 없애고 구성 요소를 프런트 엔드 코드(front-end code)에 더 가깝게 만든다.

    속성(properties) 및 값(values)

    속성 및 해당 값을 사용하여 변형의 속성을 정의할 수 있다. 

    속성과 값을 필요한 만큼 추가하고 디자인 시스템에 맞게 사용자 지정할 수 있다. 속성과 값을 디자인 시스템의 코드 구성 요소에 매핑할 수도 있다.

    • 속성(Properties)은 구성 요소의 가변적인 측면이다. 예를 들어 버튼 구성 요소의 속성은 typesizestate, 또는 icon.
    • 값(Values)은 각 속성에 사용할 수 있는 다양한 옵션이다. 예를 들어 state 속성은 defaulthoverpressed 및 disabled 값을 가질 수 있다.

    구성 요소 세트 내의 모든 변형은 동일한 속성과 값을 사용하지만 각 변형은 고유한 조합이어야 한다. 속성과 값의 가능한 모든 조합에 대해 구성 요소가 필요하지 않다.

    액션(action)에서 속성과 값

    예제를 살펴보자! 24개의 고유한 변형(Variants)이 있는 버튼 구성 요소가 있다. 아래 이미지는 단일 구성 요소 세트 내의 이 구성 요소에 대한 모든 변형을 보여준다.

    Button_variants_dark.png

    버튼 구성 요소 집합에는 각각 고유한 값 집합이 있는 네 가지 속성이 있다.

    • 기본(Primary) 및 보조(Secondary) 값이 있는 유형(Type) 속성이다 .
    • Large 및 Small 값 이 있는 Size 속성이다.
    • Default , Pressed 및 Inactive 값이 있는 상태(State) 속성이다.
    • 아이콘(Icon) 속성에는 True 및 False 값이 있다.

    Figma는 이러한 속성과 값을 사용하여 구성 요소 집합에서 필요한 변형을 결정한다. 아래 이미지에서 구성 요소 집합의 인스턴스를 만들고 다음 값을 구성했다.

    • Type: Primary(기본)
    • Size: Large
    • State: Default(기본값)
    • Icon: False (or off)

    레이어 이름(Layer names) 및 구문(syntax)

    레이어 이름 지정은 변형(variants) 생성 및 관리의 중요한 측면이다. 대부분 임의적일 수 있는 Figma의 다른 레이어 이름과 달리 구성 요소 집합의 변형(variants) 이름에는 매우 구체적인 구문이 있다.

    여기에는 해당 변형(variants)의 속성 및 에 대한 정보가 포함된다. 레이어 패널에서 변형의 이름을 바꾸려고 할 때만 이 구문을 볼 수 있다.

    변형(variants) 이름은 다음 구조를 따른다. Property1=value, Property2=value, Property3=value

    Double-clicking_on_the_variant_name_in_the_layers_panel_allows_you_to_edit_the_name_and_see_the_layer_syntax.png

    구성 요소(components)를 변형(variants)으로 결합

    Figma에 이미 구성 요소 라이브러리가 있는 경우 구성 요소를 변형으로 결합할 수 있다. 일반적인 프로세스는 다음과 같다.

    • 슬래시(/) 명명 규칙을 사용하도록 구성 요소의 이름을 바꾼다.
    • 캔버스에서 component 구성
    • component를 variants으로 결합
    • 속성에 설명적인 이름을 지정한다.

    Components 이름 바꾸기

    Figma는 슬래시 명명 시스템을 사용하여 자산(Asset) 패널 및 인스턴스 메뉴에서 component를 구성한다. component 이름의 각각 /은 또 다른 수준의 계층 구조를 만든다.

    이렇게 하면 라이브러리를 더 쉽게 탐색하거나 관련 component를 찾고 교체할 수 있다. Component의 이름 지정 및 구성 방법 알아보기 →

    이 이름 지정 시스템을 사용하여 기존 component를 variants으로 변환할 수도 있다. 정확하게 변환하려면 component 이름이 다음 구조를 따라야 한다.

    componentName/property1value/property2value/property3value

    • 첫 번째 앞의 텍스트 /는 component 집합의 이름이 된다.
    • Figma는 / component 이름에서 다른 모든 속성에 대해 새 속성을 생성한 다음 속성을 값으로 추가한다.
    • 네이밍 시스템에서 접미사를 사용한 경우 구성 요소의 이름에 접미사를 추가하고 /로 구분해야 한다.

    이름이 있는 버튼 구성 요소 Button/Primary/Large/Default/False에는 다음과 같은 속성과 값이 있다.

    Component set name: Button
    Variant: Primary
    Property 2: Large
    Property 3: Default
    Property 4: False

    아래 이미지에서 나머지 component 이름(왼쪽)이 어떻게 variants 값(오른쪽)으로 변환되는지 확인할 수 있다.

    Slash_naming_convention.png

    특정 components에 대한 variants가 많은 경우 components를 행, 열 또는 그리드로 구성할 수 있다.

    이렇게 하면 디자인 시스템을 사용하는 모든 사람에게 다차원적 특성을 전달하는 데 도움이 된다. Component sets 옆에 텍스트 레이어를 추가하여 관련 속성 및 값에 주석을 추가할 수도 있다.

    아래 예에서는 버튼 variants을 그리드에 정렬했다. 또한 속성 값에 해당하는 텍스트 레이어를 캔버스에 추가했다.

    Organize_components.png

    변형(variants)으로 결합

    1. 결합할 component를 선택한다. 레이어 및 개체 선택 방법 알아보기 →
    2. 오른쪽 사이드바에서 Combine as Variants 버튼을 클릭한다.
    3. Figma는 모든 component를 단일 component sets에 추가한다.
    A_bunch_of_components_are_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_combine_as_variants_button_in_the_right_sidebae.png

    속성을 설명하는 이름 지정

    변환 프로세스의 일부로 Figma는 일반 속성을 만들고 component 이름에 값으로 추가한 속성을 추가한다.

    Figma는 속성의 이름을 모르기 때문에 첫 번째 속성의 이름을 지정한 다음 , , 등 Variant으로 순차적으로 번호를 지정한다 . Property 2 Property 3

    이러한 속성의 이름을 더 설명적인 것으로 변경해야 한다.

    1. component sets을 선택한다.
    2. 오른쪽 사이드바의 Variants 섹션에서 현재 속성을 본다.
    3. 속성 위로 마우스를 가져가면 주변에 회색 상자가 나타난다.
    4. 속성을 편집하고 더 설명적인 이름을 지정하려면 클릭한다.
    5. 적용하려면 속성 외부를 클릭하라.
    6. 나머지 속성에 대해 반복한다.
    The_component_set_is_selected_in_the_canvas_and_the_cursor_is_hovering_over_the_editable_text_field_for_first_property_in_the_variants_section.png

    새 변형(variants) 만들기

    • 맥: ⌥ Option + ⌘ Command + K
    • 윈도우: Ctrl + Alt + K

    Components 생성 방법 알아보기 →

    1. component 선택
    2. 슬래시 네이밍 규칙을 사용하도록 component의 이름을 바꾼다(권장).
    3. 오른쪽 사이드바에서 Variants 섹션에서 ‘+’ 클릭하여 첫 번째 변형을 추가한다.
    4. Figma는 다음과 같은 몇 가지 작업을 수행한다.
      • 동일한 속성을 가진 동일한 component 만들기
      • 두 component를 component sets에 variants으로 추가
      • 슬래시 네이밍 규칙을 사용한 경우 / 앞의 텍스트는 component sets의 이름이 되고 뒤의 속성은 값으로 사용된다.
    5. 필요에 따라 variants을 시각적으로 변경한다.

    속성 및 값 추가

    변형(variants)을 처음 생성할 때 또는 디자인 시스템이 발전함에 따라 속성과 값을 variants에 추가한다.

    component set에 속성을 추가한다.

    1. component set을 선택한다.
    2. 오른쪽 사이드바 변형 섹션에서 ‘⋯’ 클릭
    3. 새 속성 추가를 선택 한다.

    변형을 선택한 경우에만 값을 추가할 수 있다. 이를 수행하는 몇 가지 방법이 있다.

    • 현재 값 옆에 있는 ‘˅’ 클릭하여 옵션에서 새로 추가를 선택한다.
    • 값 필드를 클릭하고 새 값을 입력한다.
    • 레이어 패널에서 변형을 두 번 클릭하고 원하는 속성 값을 업데이트한다.

    Component set에 더 많은 variants 추가

    다음 방법 중 하나를 사용하여 component set에 변형을 계속 추가한다.

    • component set 내부의 캔버스를 클릭한다. 두 개 이상의 변형이 있는 경우에만 이 옵션이 표시된다.
    • 오른쪽 사이드바의 variants 섹션을 클릭하고 새 변형 추가를 선택한다.
    • 키보드 단축키를 사용하여 기존 변형 복제:
      •  : [keybt]⌘ Command[/keybt] + [keybt]D[/keybt]
      • 윈도우 : [keybt]Ctrl[/keybt] + [keybt]D[/keybt]
    • 다른 component를 component set로 끌어서 변형으로 추가한다.

    Variants 관리

    Variants 구성

    Component에 새 변형을 추가할 때 Figma의 기본 동작은 동일한 간격으로 단일 열에 변형을 추가하는 것이다.

    Component를 변환하기 전에 다른 레이아웃에 있는 경우 Figma는 component set에 대해 동일한 레이아웃을 유지한다.

    Figma의 기본 동작을 무시하고 원하는 방식으로 변형을 정렬할 수 있다.

    • 변형을 선택하고 component set 내의 새 좌표로 이동한다. Figma를 사용하면 다른 변형의 상단을 포함하여 component set 내의 아무 곳에나 변형을 배치할 수 있다.
    • 오른쪽 사이드바에서 component set의 크기를 조정하거나 일반 프레임처럼 캔버스에서 크기를 조정한다.
    • 모든 변형을 선택한 경우: 오른쪽 사이드바의 필드를 사용하여 변형 사이의 수평 및 수직의 공간을 조정한다.

    속성 및 값 이름 바꾸기

    속성 또는 값의 이름을 바꾸려면 component set을 선택하고 오른쪽 사이드바의 Variant 섹션에서 속성 또는 값을 업데이트해야 한다.

    속성 이름을 바꾸려면 다음을 수행한다.

    1. 속성을 클릭하고 더 설명적인 이름을 입력한다.
    2. EnterReturn 키를 눌러 적용하거나 속성 외부를 클릭하여 적용한다.
    3. 나머지 속성에 대해 반복한다.

    값의 이름을 바꾸려면 다음을 수행한다.

    1. 값을 두 번 클릭하고 새 이름을 입력한다.
    2. EnterReturn 키를 눌러 적용한다.
    With_the_component_set_selected_click_the_property_or_double-click_on_the_value_in_the_right_sidebar_to_edit_it.png

    속성 및 값 재정렬

    속성과 값이 오른쪽 사이드바에 나타나는 순서를 변경할 수 있다. 속성을 재정렬하면 Figma는 일치하도록 변형의 이름과 구문을 조정한다.

    속성을 재정렬하려면 다음을 수행한다.

    1. 구성 요소 집합을 선택한다.
    2. 변형 섹션 에서 속성 필드의 왼쪽 가장자리 위로 마우스를 가져갈 때까지 ‘=’ 나타난다.
    3. 속성을 클릭하고 위나 아래로 끌어 순서를 변경한다.

    값을 재정렬하려면 다음을 수행한다.

    1. 값을 길게 클릭한다.
    2. 값으로 끌어서 새 순서로 만든다.
    3. 적용하려면 릴리스 한다.

    속성 제거

    속성을 제거하려면:

    1. 구성 요소 집합을 선택한다.
    2. 사이드바 의 변형 섹션 에서 속성 위로 마우스를 가져간다 .
    3. ‘-‘를 클릭하여 제거한다.

    라이브러리에 Component sets 게시

    전문 또는 교육 팀 또는 Figma 조직의 구성원인 경우 변형을 공동 작업자와 공유할 수 있다.

    팀이나 조직의 구성원이 사용할 수 있도록 스타일 및 일반 구성 요소와 함께 구성 요소 집합을 게시한다.

    구성 요소 세트는 다른 구성 요소와 함께 자산 패널에 나타난다. Figma는 구성 요소 세트의 왼쪽 상단 모서리에 있는 변형을 기본 변형으로 사용한다.

    그런 다음 공동 작업자는 구성 요소 세트를 파일로 끌어서 인스턴스를 생성할 수 있다. 그런 다음 오른쪽 사이드바에서 속성 값을 구성하여 구성 요소 집합의 다른 모든 변형에 액세스할 수 있다.

    라이브러리 게시 방법 알아보기 →

    변형(variants) 사용

    Component sets는 일반 구성 요소와 함께 자산 패널에 나타난다. 따라서 자산 패널에서 특정 변형을 찾는 대신 구성 요소 집합만 선택하면 된다.

    캔버스에 해당 구성 요소의 인스턴스가 설정되면 인스턴스의 속성 값을 구성하여 변형(variant)을 선택할 수 있다.

    구성 요소 세트(component sets) 선택

    1. 왼쪽 사이드바에서 자산 탭을 클릭 하거나 키보드 단축키를 사용한다.
      •  :

    오른쪽 사이드바에서 속성과 값을 구성하여 구성 요소 집합에서 다른 변형을 선택합니다.

    1. 인스턴스를 선택합니다.
    2. 오른쪽 사이드바에서 구성 요소의 이름을 봅니다. 구성 요소에 변형이 있는 경우 구성 요소 이름 아래에 해당 구성 요소 집합의 속성과 값을 구성하는 필드가 표시됩니다.
      • 사용 ‘⌄’ 속성 옆에 있는 원하는 값 조합을 선택합니다.
      • 다음을 사용하여 특정 속성을 껐다가 켭니다. On 그리고 Off 토글 스위치

    인스턴스(instances) 간 스왑(swap)

    일반 구성 요소와 마찬가지로 변형을 사용할 때 인스턴스 간에 교체할 ​​수 있다.

    가장 효율적인 방법은 인스턴스 메뉴 를 사용하는 것이다. 인스턴스 메뉴를 사용하면 현재 파일 또는 활성화된 팀 라이브러리에서 구성 요소 교체를 찾을 수 있다.

    구성 요소를 선택한 경우 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스한다.

    1. 변경할 인스턴스를 선택한다.
    2. 오른쪽 사이드바에서 구성 요소 이름을 클릭한다.
    3. 인스턴스 메뉴를 사용하여 다른 구성 요소를 검색하고 선택한다.

    인스턴스 메뉴를 사용하여 교체하는 방법 알아보기 →

    속성 재정의(override)

    구성 요소 라이브러리는 설계 시스템의 이상적인 구현을 정의하고 개략적으로 설명한다.

    이러한 구성 요소에는 버튼 레이블과 같이 변경해야 하는 일반 정보가 포함되어 있는 경우가 많다. 일부 상황에서는 해당 특정 인스턴스의 다른 측면을 변경해야 할 수도 있다.

    재정의(Overrides)를 사용하면 인스턴스를 표면적으로 변경할 수 있다. Figma는 텍스트, 채우기, 획 및 효과 속성에 대한 재정의를 지원한다. 지원되는 재정의에 대해 자세히 알아보기 →

    보존 재정의(override)

    Figma는 다른 변형을 선택하거나 인스턴스 메뉴에서 인스턴스 간에 교체할 ​​때 재정의를 유지하려고 시도한다.

    Figma는 다음 기준을 사용하여 재정의를 유지할지 여부를 결정한다.

    • 레이어 이름은 현재 인스턴스와 선택하는 변형 또는 인스턴스 간에 일치해야 한다. 이는 인스턴스를 교체하고 변형을 선택할 때 모두 적용된다.
    • 변형을 선택할 때 Figma는 재정의한 레이어 속성이 원래 변형 간에 일치하는지 확인한다. 그렇다면 Figma는 재정의를 유지한다.

    아래 예제에서 Figma는 3단계에서 채우기 재정의를 유지하지만 4단계에서는 유지하지 않는다. 이는 default primary 버튼과 hover primary 버튼이 모두 의 동일한 채우기로 시작했기 때문이다 #1BC47D. 우리의 재정의는 16진수 코드에서  #1BC47D로 변경하는 것이었다 #F531B3.

    hover secondary 변형의 채우기가 있으므로 Figma는 4단계에서 재정의를 유지하지 않는다 #ffffff. 이는 원래 재정의를 적용한 채우기와 다르다( #1BC47D).

    Preserve_overrides.png
    출처: Variants in Figma