묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
[gif첨부] 아이콘 사이즈 설정 Instant swap property
안녕하세요.피그마에서 아이콘이 있는 버튼을 만드는데 어려움이 있어 문의드립니다.내용과 함께 gif를 첨부드렸는데 같이 확인부탁드립니다. 아이콘 사이즈 : 24 / 20px버튼 사이즈 : default / X-small아이콘 : Leading(앞) / Tralling(뒤)Instant swap property를 한후, ->Leading icon , ->Trailing icon을 사용하고 싶은데요.아이콘 사이즈도 자동으로 사이즈별로 관리하려면 어떻게 해야할까요?아이콘 Instant swap property를 하고나면, 사이즈가 하나로만 인식을 하는지 전체 사이즈가 변경되는 현상이 있습니다.사이즈별로 연동되지 않고 전체가 같이 바뀌는 현상이 있습니다(* 아래 처럼 20px 작은아이콘 영역을 Instant swap property 하면 24px로 커지게 됩니다.사이즈에서 설정을 바꾸면 기존에 큰 사이즈도 똑같이 따라가고 있습니다.)두개의 아이콘 사이즈를 각각 다르게 설정하는 방법을 찾고있는데 혹시 좋은 방법 있으시면 알려주시면 감사하겠습니다. 잘부탁드립니다. 감사합니다.
-
미해결피그마 시작하기
각 강의별 샘플
각 강좌에 사용되는 예제는 제공이 되지 않는건가요?예) 프레임, 그룹 때 사용한 학습완료 파일 등등예제는 그냥 눈으로 강의보면서 확인하고 실습은 못하는건가요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UI 디자인 원리-좋은 사례, 아닌 사례
UI 원리가 적용된 좋은 사례- 유아이볼유사성 원리, 근접성 원리유아이볼은 국내 ux,ui 패턴을 모아놓은 서비스이다. MAU/ UI 패턴/ 실시간 인기 프로덕트/ 서비스 화면을 그룹핑 한 것을 한눈에 볼 수 있으며 서비스 화면의 경우에는 컴포넌트별로 분류하여 사용자가 많은 정보를 빠르게 인지할 수 있도록 했음을 확인할 수 있다. (컨트롤/아코디언/상태/오버레이/뷰)휴리스틱 평가: 상태 안내카테고리 유형 ”금융”과 UI 패턴 “계좌”를 선택했을때 필터의 진행상태를 바로 확인할 수 있어서 상태 안내가 명확하다고 느껴졌다.CTA유아이볼을 탐색하다보면, 무료 플랜은 탐색 횟수가 제한됨을 확인할 수 있다. 멤버십 구독 CTA가 백그라운드 컬러와 대비되며, 타원형으로 강조되어있어서 사용자가 유료 플랜을 확인하도록 유도한다.디자인 시스템상단탭을 이동했을 때 모바일-웹사이트, 아티클-포폴전자책-워크샵의 콘텐츠가 일관된 레이아웃으로 구성되어있음을 확인할 수 있다. ㄱ. 서비스 이미지/브랜드 로고/서비스 명/ 산업군ㄴ. 콘텐츠 이미지/콘텐츠명/가격 또는 부가정보 UI 원리가 적용되지 않은 사례- 유아이볼1. 유사성 원리마이리얼트립은 항공권과 숙소, 투어, 액티비티를 모두 갖고 있는 여행 플랫폼이다. 유사성의 원리에 따르면 홈화면의 서비스 카테고리가 연관된 것끼리 묶여있지 않아서 정보의 기준을 잡기 어렵고 복잡하게 느껴진다. 전체 카테고리를 눌렀을때 분류되는 정보(항공/숙소/투어/교통/여행편의/할인,특가)로 상단탭을 구성하고 하위 메뉴로 서비스 카테고리를 분류한다면 정보를 쉽게 찾을 수 있을 것이다. CTA의 중요성더보기 CTA와 툴팁의 컬러와 위치가 겹쳐 사용자의 다음 행동을 유도하지 못한다고 느꼈다. 또한 더보기 CTA를 눌렀을때 할인% 탭으로 진입한다고 예상했지만, 홈하단 콘텐츠로 스크롤 되어 버튼의 역할을 예상하기 어려웠기 때문에 안좋은 사례로 판단했다.
-
미해결피그마 시작하기
화면확대 인터렉션 질문이요
강의를 여러번 봤는데도, 사진확대 컴포넌트를 만들고 인스턴스 컴포넌트를 프레임안에 넣고 사진을 어떠게 넣으라는건지 잘 모르겠습니다.그룹을 해야 하는건지...인스턴스 컴포넌트안에 이미지를 넣을수는 없지 않나요.,그부분에 자세한 설명이 없어서 ....
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX와 안좋은 UX 사례
안녕하세요, 수업에서 배운 디자인 원리로 좋은 UX와 안좋은 UX 사례를 분석해보았습니다.[좋은 UX - 29CM 앱]1. 정보 설계 및 사용자 의도 관점과 일관성의 원리29CM 앱은 홈의 (우먼)메뉴로 바로 진입되고, 상단탭에 상황별로 카테고리가 구분되어 있어 탐색하기 쉽다.입점되어있는 다양한 브랜드를 홈화면에 카드형 콘텐츠로 노출시키고, 하단에 ‘당신을 위한 7일 큐레이션’과 ‘당신을 위한 추천 상품’이라는 맞춤형 컨텐츠를 배치했다. 이는 높은 목적을 가진 사용자가 다음 행동으로 진입하기 쉽도록 정보를 설계했다고 생각했고,낮은 목적을 가진 사용자가 평소 관심있던 제품을 눈에 띄게 해 다음 행동을 유도하는 흐름을 설계했다고 생각한다.또 브랜드 콘텐츠 하단에 브랜드 제품을 2개씩 배치해서 제품에 대한 사용자의 예측가능성을 고려한 설계도 눈에 띄었으며,브랜드 콘텐츠와 추천 콘텐츠 각각 일관된 레이아웃을 이용해 사용자의 피로도를 줄인 점에서 좋은 UX라고 판단되었다.[안좋은 UX - H&M 앱]1. 행동유도성 관점H&M에 진입했을 때 제품 카테고리가 바로 보이지 않고, 세일종료 컨텐츠가 한 화면을 차지하고 있어 필터를 ‘MEN’으로 바꿔도 달라진 정보를 확인할 수 없었다. 기능의 역할을 직관적으로 알기 어려웠고,‘지금 쇼핑하기+’ 버튼 또한 제품소개로 이어지지 않고 ‘세일 곧 종료+’와 같은 네비게이션으로 이어져 인지부조화를 겪었다.이 부분에서 수업에서 다룬 행동유도성의 원리에 어긋난다고 생각해 안좋은 UX라고 판단되었다.그동안 모르고 넘어갔던 부분을 강의를 통해 짚고 넘어갈 수 있었습니다! 알기 쉽게 설명해주셔서 감사합니다 :)
-
미해결피그마 시작하기
화면전화효과 질문드려요
스트링베리어블로 이미지전환 인터렉션 만들기에서 다음버튼 처럼 이전버튼 만들려고 하면 이전버튼에 인터렉션을 동일하게 주면 되는건지요?이미지3 -> 이미지2-> 이미지1음....그렇게 했을때는 안되어서요
-
미해결피그마 시작하기
30번 강의질문
30.7-상품확대 인터렉션 만들기에서요컴포넌트까지는 다 만들었는데요,마지막에 이미지에 붙여넣기 할때 어떤식으로 하는건지 강의 봐서는 잘 획갈려서요이미지를 4개 배치했고, 이미지가 각각 있는데 그걸 그룹화해서 넣어야 하는건지 어떤건지...잘.....
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
클라우드 웨이즈로 서버를 어떻게 옮길수있나요?
안녕하세요! 혹시 클라우드 웨이즈로 서버를 어떻게 옮길수있나요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Image placeholder 그룹화
Lock Aspect Ratio 플러그인을 안써서 제 Image Placeholder는 그룹이 안생긴걸까요? 14:22초 처럼 Image placeholder-Dynamic에 붙여넣을 [Place image]나 하위 개념이 없습니다. Frame 새로 만들고 그룹으로 만들고 컴퍼넌트화해서 구조를 비슷하게는 해봤는데 (아래에 두번째 사진첨부)그렇게 하면 되는건지 궁금합니다.
-
미해결UXUI 디자인 6주 완성 챌린지 (w. 피그마)
Auto layout 관련
안녕하세요. 표제 관련 문의 드립니다. 수업대로 박스 생성 후 텍스트를 넣었고 그룹화한 다음에 add auto layout을 하였습니다. 이렇게 구두 박스를 만들고 복사해서 스니커즈를 만드려는데, auto layout이 됐음에도 텍스트가 프레임 밖으로 삐져 나옵니다. 구두 프레임 width를 hug로 맞추면 복사한 프레임 내 텍스트가 삐져나오는 현상을 막을 수는 있으나 선생님이 하신 것처럼 구두는 width를 작게 시작해서 스니커즈같이 긴 것은 긴대로. 이런식으로 구현하려면 어떻게 해야 하나요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Create Instance swap Property 안보이는 이유
영상 18:13초에는 Icon Placeholder를 선택해서 Create Instance swap Property를 하게 되어있는데 왜 저는 안뜰까요..?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템 관련
우선 좋은 강의 정말 감사합니다. 저는 B2B 회사에서 PM/기획자로 일하고 있는데요회사 내 디자이너는 없이 기획자와 프론트 엔지니어 협의를 통해서 서비스를 만들고 있습니다.서비스를 만드는 건 괜찮으나 통일된 UI/UX를 제공하기에는 많이 아쉽다보니 이번에 강의를 듣게 되었어요 디자인 업무를 하진 않았어서 강의를 반복으로 들어야 할 것 같은데요...강사님이 보시기에...디자이너 없이 디자인 시스템을 회사에 적용하는 것이 가능할까요? 또는 효과적일까요? 강의에서 말씀해주신대로 초기 시간/인력이 투여되지만 해놓으면 확실히 좋을 부분이라서..고민이 좀 되네요디자이너가 없다면 아무래도..더 시간이 걸릴 것 같은데요 강사님의 의견을 듣고 싶습니다.
-
해결됨6주 완성 디자인 시스템 부트캠프 4기
질문이 있습니다!
안녕하세요. 궁금한 점이 있습니다.1) 10/1일에 진행하셨던 라이브는 현재 다시보기가 아직 안열린걸까요?2) 챌린지 미션 과제를 제출할 때, 공개 설정에서 다른 수강생분들도 참고할 수 있다고 하셨는데 과제 제출 후 다른 수강생 분들의 작업물을 살펴볼 수 있는걸까요?답변해주시면 감사하겠습니다! 오늘도 수고하세요 ㅎㅎ
-
미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
포모도 타이머 그냥 강의 전에 제대로 테스트 안할 거면 강의 만들지마라
진짜 강의 대충만드네
-
미해결UXUI 디자인 6주 완성 챌린지 (w. 피그마)
component, frame, variants 그리고 컴포넌트에 새로운 property 추가하기 관련 질문
안녕하세요. 질문드립니다.frame과 component, variants, instance의 관계를 다시 설명해주시면 감사하겠습니다.그리고 실제로 수행하는 부분에서 잘 안되는게 있어서 질문드립니다.Icon/Button component에 새로운 1,2번 아이콘을 추가하려고 합니다. 그런데 기존 Icon/Button variants로 합쳐지지 않아요. 1,2번을 선택하면 우측에 combine as variants 버튼이 확인되는데 Icon/Button 자체가 variants라서 그런가? 잘 안되네요.이렇게 variants 자체를 클릭하면 추가할 수는 있는데 제가 새로 만든 1,2번을 추가하는 것이 원활하게 잘 안되고 있습니다 ㅜㅜ 이때부터 어떻게 바꿔야 하는지 잘 모르겠어서 추가가 잘 안되고 있는데, 혹시 알려주실 수 있으실까요?
-
미해결모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
11. login 페이지 - 폼 요소 작성 및 스타일
11. login 페이지 - 폼 요소 작성 및 스타일19:12앱 전체 사이즈 넓이가 414px피그마에서 빨간줄에는 us.가 한줄강사님의 코딩저의 코딩 수업 중 따라하던 중뷰어를 보니 us.가 내려가 있음똑같이 했는데 왜 이럴까요 근데 font-weight: 700;이 부분을 빼니 us.가 위로 잘 올라가 있고요 font-weight: 700;를 넣으면 다시 내려오지요header 패딩도 강사님이랑 동일한데 무엇때문일까요? 참고로 저는 맥을 사용하고 크롬을 보고 있었습니다.
-
미해결모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
참조: https://creatie.ai/ 사이트가 바뀌었어요
11. login 페이지 - 폼 요소 작성 및 스타일9:58 수업노트보기에서 참조: https://creatie.ai/이 링크가 지금은 변경이 되어 https://readdy.ai/로 되어있어서요 이젠 유료이고 프롬프트로 이젠 제작하는 것 같습니다.그래서 대안은 피그에 플로그인에 AutoHTML | Components to Code나 다른 플러그인 추천이 좋을 것 같습니다.
-
해결됨모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
수강기간 무제한으로 변경 부탁드립니다.
수강기간 무제한으로 변경즘 부탁드릴게요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
안녕하세요 섹션10에서 77번 강의 에서 나오는 와이어프레임 html 나와있는 pdf자료 어디에서 다운로드 하나요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오브젝트간 간격 4px 주시는 이유가 구체적으로 궁금합니다.
안녕하세요.좋은 수업 감사드립니다.이 수업에서 간격을 4의 배수로 주신다고 했는데 그 이유가 잘 이해가 안되서요. 구체적으로 설명해주실 수 있나요?