묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
constraint 버튼에 적용할때 프레임이여야 하는지요
버튼이 반드시 프레임이여만 되는건가요? 프레임아니고 도형으만들면 적용이 안되는거 같아서요 그리고 constraint를 적용해서 버튼을 만든뒤에 버튼이니까 컴포넌트로 만들고 복사해 다른 프레임에서 인스턴스가 되쟎아요.그런데 문제는 컴포넌트 페이지에서 프레임 위드를 줄이면 복사한 인스턴스 페이지에서도 그 인스턴스 버튼도 똑같이 줄게되는데...이런건 어떻게 생각을 정리해야할까요?? 컴포넌트화 시에는 사용을 말아야하는건가요? 실무에서 모든 요소를 다 컴포넌트화하면 초보라그런지 너무할것도 많고 어렵게 느껴지는데 최소한의 것만 만들어서 인스턴스로 쓴다면 어떤것들이 있을까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
커서 챗
선생님 안녕하세요, 혹시 피그마에서 커서 쳇에서 색상을 변경 할 수 있는 방법이 있을까요?그룹으로 친구와 작업 하는데 커서 쳇 색상이 동일하게 나와서 조금 불편해서요...
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
글리프에서 특수기호 찾는 법
플러그인에서 글리프를 불러와서는 필요한 특수기호를 찾지를 못해요~영어가 후달려서....우짜죠ㅠㅠ
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
와이어프레임의 범위
와이어프레임은 low-fi, mid-fi, high-fi 와이어프레임으로 나눌 수 있다고 하셨는데보통 실무에서 와이어프레임을 만들어달라고 요구하는 이유는 대략적인 콘텐츠들의 배치나 화면의 흐름을 보기위함인가요?대학교에서 관련 프로젝트를 진행하게 되면서 pm분께서 저에게 gui를 완성해달라고 하셨어요. 지금까지 저는 gui가 ’버튼이나 아이콘, 혹은 삽입되는 일러스트와 같은 세부적인 그래픽요소‘ 정도로 인지하고 있었고, 와이어프레임은 웹이나 앱의 화면을 지칭하는 용어로 알고 있었습니다. 하지만 그 pm분은 gui를 ’당장 출시할 수 있을 정도로 완성된 화면‘을 만들어달라는 뜻으로 말씀하신 것이었습니다. 즉 제가 혼동되는 부분은 ’당장 출시할 수 있을 정도로 완성된 화면‘을 와이어프레임(굳이 따지자면 high-fi와이어프레임)이라고 불러야하는지, gui라고 불러야하는지 입니다. 실무에서는 해당 용어가 어떻게 사용되는지 궁금합니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
아이패드에서 보는 중인데 링크나 파일들은 어디서 받을 수 있나요?
아이패드로 보는 중입니다!링크는 댓글을 검색하여 찾았는데, 파일들은 어디서 받을 수 있을까요? 아이패드로 보는거라 링크가 안나오는걸까요ㅠㅠ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
9-6. 아이콘 만들기 _ 해상도를 고려한 아이콘 Export하기의 내용에서 선을 면 <-> 면을 선으로 바꿀 수 있나요?
9-6. 아이콘 만들기 _ 해상도를 고려한 아이콘 Export하기의 내용에서 선을 면으로 바꾸면 수정시 원본이 없는 건데, 바꾼 면을 다시 선으로 바꿀 수 있나요? 있다면 방법을 알려주시면 감사하겠습니다!혹은 백업해놓고 바꿔 사용하는 게 더 효율적인지도 궁금합니다.
-
해결됨UXUI 디자인 비전공자를 위한 포트폴리오 제작방법
이해관계자 분류
이해관계자를 분류할 때예시를 들어주신 것처럼 (600만원, 500만원, 400만원.....)그 기준은 제가 임의로 정하는 건가요?기준을 어떻게 잡아야 하는 지 모르겠어요.
-
해결됨UIUX 포트폴리오 Part.1 - Figma(피그마) 깊이 있게 배우기
iconsax 플러그인이 어디에 있는건가요...
아무리 검색해도 안나와서 결국 제공해주신 완성본 파일에서 가져와서 하고 있는데 .. 제가 못찾는건지 ㅠㅠ,..,.
-
해결됨UXUI 디자인 비전공자를 위한 포트폴리오 제작방법
프로토타입 (1)과 (2) 영상 내용이 같아요
5주차 프로토타입 (1)과 (2) 영상 내용이 같은데어떻게 된 건가요?
-
해결됨UXUI 디자인 비전공자를 위한 포트폴리오 제작방법
pdf파일 어디서 다운 받을 수 있나요?
pdf파일 어디서 다운 받을 수 있나요?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
휴리스틱 평가를 이용한 디자인 원리가 잘 적용된 사례/아닌 사례
안녕하세요~ 강의 잘 듣고 있습니다.2024년이 되었네요. 새해 복 많이 받으세요 ^_^휴리스틱 평가를 이용한 디자인 원리가 잘 적용된 사례와 아닌 사례를 찾아보았습니다. 적용이 잘 된 웹사이트로는 Bloomingdale's 를 꼽았습니다.휴리스틱 평가 부분 강의에서 말씀해주신 것 처럼 패스워드를 쳤을 때에 충족되는 부분이 초록색으로 불이 들어와서 사용자로서 비밀번호를 만들 때 어떤 것들을 더 충족시켜야 하는지, 지금까지 충족을 시켰는지 알 수있어서 편했습니다.그리고 제가 원래 사용하던 이메일을 email 칸에 기입했더니 빨간색으로 원래 있는 아이디라는 안내까지 해주어서 좋았습니다. 적용이 잘 안된 웹사이트로는 Ikea 를 꼽았습니다.Ikea 웹사이트에서도 sign up page에서 비밀번호를 기입하는 부분에서 휴리스틱 평가가 적용될 것이라고 기대했는데 기존 사용하던 아이디를 넣어도 별다른 안내가 나오지 않았고, 비밀번호도 Bloomingdale's와 다르게 어떤 부분이 충족되었는지/더 충족해야하는지 빨간색 이어진 긴 문장으로는 쉽게 판단이 되지 않았습니다.항상 강의 잘 보고있습니다. 감사합니다~
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Scale기능과의 차이점
안녕하세요! 혹시 Outline stroke 설정 후 사이즈 변경하는 것과 Scale로 2x로 변경하거나 수치를 바꿨을때 2개의 산출물 결과나 환경이 달라지나요?
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
아이콘 자료 링크가 안나옵니다.
강사님 두번째 Apple 아이콘 자료 링크를 들어가 보면The page you're looking for can't be found.이렇게 나와요.찾아봤는데https://developer.apple.com/design/human-interface-guidelines/icons/여기가 맞나요?
-
미해결성공적인 진짜 iOS Design Guide - [Autolayout With Code]
비율로 레이아웃 설정하기 -1
14:12 부분 설명이 이상해요width = 1.60377 x height (85:53) - 50"여기서 1.6이라하는것은 내가 비율로설정한(85:53)인거고 1.6은 곱하기 height - 50 만큼 빼지는거고 그게 결정지어지는 값은 width다."1.6 이 중복 된게 이상하고설명하신것처럼height 값을 구해보면 85 : 53 = -50 : x(53 * -50) / 85 = -31.1764706이 나옵니다.1.60377 x -31.1764706 = -49.9998883 이고,여서 -50 더하믄 -99.999888 인데요?실제 width 값은 110.67입니다.height를 구하는 식이 85:53 = constant : x 즉, x(height) = (53 * constant) / 85 라는 소리신데 이해가 안가네요 ㅠㅠ
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
좋은 UX와 안 좋은 UX 사례
안녕하세요. 저는 뉴욕에서 사는, 지금은 다른 전공으로 일하며 UX 디자인에 관심이 생겨서 공부하고 있는 사람입니다. 먼저 예시와 함께 쉽게 잘 설명해주셔서 초보자인 저도 잘 따라가고 있고 디자인 원리를 배우면서 기존에 웹/앱을 사용하면서 불편함을 느꼈던 것이 사용자로서 왜 불편함을 느꼈는지 다시한번 느끼게 되어서 신기하고 재밌습니다. 항상 감사합니다. 좋은 UX의 사례로 미국 사이트 Back Market 을 꼽았습니다. https://www.backmarket.com/en-us 디자인 레이아웃에 사용된 도형이 네모로 일관되게 통일되어 보기가 편했습니다. 대응의 원리를 잘 사용하여 왼쪽에 세 줄과 함께 "All Item", 그 바로 옆으로 지금 시즌에 사용자들이 가장 많이 찾는 "Holiday Gift Guide" 등등 사이트가 메뉴 바를 가장 왼쪽, search 기능을 맨 위에 두어서 사용자가 기존 다른 사이트에서 보던 레이아웃과 비슷하게 배치하여 이용하기가 편한 것 같이 느껴졌습니다. All Item tap을 누르면 카테고리 분류를 잘 해 놓아서 높은 사용자의 의도가 있는 사용자들은 이 탭을 이용하여 원하는 아이템을 바로 찾을 수 있습니다. 또한 메인 페이지에 Gift Idea, Community Stories 등 낮은 사용자의 의도를 가진 사용자들도 와서 원하는 바를 browse 할 수 있게 한 것 같습니다. 오른쪽 > 버튼을 검정색 바탕으로 해놓아서 사용자가 왼쪽 버튼보다 오른쪽 >을 눌러 오른쪽으로 이동하여 더 많은 아이템을 볼 수있도록 유도한 점이 좋았습니다. 안 좋은 UX 사례로는 Uniqlo를 꼽았습니다. https://www.uniqlo.com/us/en/men웹사이트를 들어가면 가장 불편한 점이 크리스마스 세일 아이템만 강조하여서 다른 ALL 카테고리로 이동할 수 있는 버튼을 찾을 수가 없습니다. Holiday 프로모션 글자 color를 background 이미지와 중복된 컬러를 써서 버튼이 잘 안보이고 상단 우측에 로그인 아이콘이 없어서 찾는데 오래 걸렸습니다. 이미지의 해상도도 많이 좋지 않아서 보는데 많은 불편함이 있었습니다. 과제하면서 여러 사이트들을 찾아보고 좋은 UX와 안 좋은 UX를 가려보는 시간을 가졌는데 강의로 듣던 내용을 직접 찾아보며 어떤 점이 편하고 어쩐 점이 불편했는지 경험하니 더욱 강의 내용이 와닿고 기억에 오래 남는 것 같습니다. 감사합니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
제이쿼리 load 메서드 포트폴리오 연결 질문
안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :)해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이안 뜨더라구요ㅜㅜ혹시 이런 경우에는 어떻게 하면 되는 걸까요?항상 알차고 좋은 강의 감사합니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션11 예제 링크
섹션11 예제 링크 걸어주신 두가지 중에두번째 '라이브러리 관련 예제' 링크 들어가서duplicate to your drafts 눌러서 새창 열었는데요첫번째 '스타일 및 콤포넌트 예제' 링크 자료가 나와요 ㅠㅠ
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
상품 상세페이지 아코디언 부분
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') })상품문의에 클레스가 들어가서 상품후기에 있는 엑티브가 빠졌는데상품문의 밑에 디테일은 안접혀졌어요 (영상강의캡쳐)이렇게 적을경우에 .title부분은 class가 빠져서 시블링이 되는데 .detail 부분은 접었다 펴는 토글이라서 계속클릭하면 .title +,- 와 .detail의 이미지가 안맞는데 이런경우에는 어떻게 하나요 ㅠ?
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
UX 디자인 원리 과제 - 좋은/안좋은 UX 사례
좋은 사례)Gmail PC 버전 카테고리별 전체 이메일 선택 기능:왼쪽 상단 전체 이메일 체크 박스 옆에 작은 드롭다운 화살표를 배치함으로써 단순히 전체 이메일이 아닌 카테고리별 (read/unread/starred/unstarred) 전체 이메일을 선택 할 수 있다는 것을 사용자가 직관적으로 이해하게끔 되어있는데, 이는 행동 유도성의 원리에 부합하는 좋은 UX 사례라고 생각합니다. 안 좋은 사례)카카오 웹툰 어플리케이션:일반적인 웹툰 독자들은 요일별로 정리 및 나열된 페이지에 익숙한데, 어느 시점부터 카카오 웹툰 어플은 가장 첫 화면에 장르별 웹툰을 배치했고 하단 메뉴에서 '시간표'를 클릭해야 일반적으로 익숙한 요일별 웹툰을 볼 수 있습니다. 10년 이상된 웹툰 독자로서 저는 해당 UI가 아직도 익숙하지 않아 원하는 웹툰을 찾기 위해 헤매는 경우가 종종 있습니다. 이는 일관성의 원리의 기준에서 안 좋은 UX 사례라고 생각됩니다.
-
해결됨UIUX 포트폴리오 Part.1 - Figma(피그마) 깊이 있게 배우기
피그마 포트폴리오 배포?
안녕하세요 강의를 수료하고 취업 준비중인 학생입니다!피그마에서 포트폴리오 형식으로 파일을 만들었습니다.사진 및 gif 파일이 같이 있습니다.노트폴리오나 비헨스에 올려서 공유하려면 프레임을 PNG로 다운 받고 업로드시에 GIF 파일은 png로 인식되는 것 같습니다.. 피그마 프로토타입 재생 버튼을 누르고 그 URL을 쉐어해서 포트폴리오를 공유하나요?사진 위에 GIF를 같이 배치하고 싶은데... 궁금합니다!