묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션 12 예제 파일이 안보입니다!
안녕하세요, 혹시 섹션 12의 예제 파일을 어디서 찾을 수 있을까요? 저와 같은 질문을 하신 수강생 분이 계셔서https://www.inflearn.com/course/%ED%94%BC%EA%B7%B8%EB%A7%88-ui%EB%94%94%EC%9E%90%EC%9D%B8/news/90808해당 링크에 가서 확인해보았지만 강의가 추가로 업데이트 되면서 순서가 달라진 것인지, 섹션 12 강의 내용에 맞는 피그마 파일이 아닌 다른 섹션의 피그마 파일이 올려져있었습니다. 섹션 12에 해당하는 예제 파일을 다운받을 수 있는 링크를 다시 한 번 알려주실 수 있으실까요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
네비게이션 보더
영상에선 패스하셨지만네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템 작업중 생긴 여러 질문들 드립니다.
안녕하세요 튜터님강의를 너무 잘보고있습니다! 고민하던 많은 부분이 해소되고있어 감사한 마음이에요 ㅠㅠ강의를 듣던중 평소 가지고있던 몇가지 질문과, 강의에서 파생되는 질문들이 있어 아래 문의남깁니다! [Shadow 여러겹 효과를 주는 이유] shadow효과의경우 튜터님께서도 강의에서 2개 값을 주신것처럼 1개 값만 주기보다는 2개씩 추가해 값을 주는경우가 많은것같은데요. 보다 섬세하게 그림자를 표현하기 위함일까요? (그렇다고 3~4개를 넣는 경우는 못본것같은데, 이렇게 레이어를 쌓듯이 그림자를 많이 추가하는 경우가 있을까요?) 2개를 넣었을때 위에 들어가는 수치와 아래 들어가는수치가 각각 의미하는게 강의에서처럼 큰 그림자, 잔그림자로 생각하면 될런지요? 너무 사소한건데 볼때마다 왜 다들 2개씩 추가해서 쓰게되었을까 궁금했던 부분이라 궁금해서 문의드립니다^^; [1개의 뜻에 여러 용어가 쓰이는경우] 모달 뒷배경의경우에 스크림이라고 나와있는데, overaly, dimmed 이런 용어도 혼용해서 많이 쓰고있는것같아서.. 혹시 3개가 각 의미하는바가 다를까요? 팀에서도 디자이너마다 비슷한데 다르게 쓰고있는 용어들이 종종 있어서 통일을 해야겠다 싶은데, 각자 입에 붙은용어가 편하다보니.. 어떤 기준으로 통일을 제안할수 있을까 싶은데 튜터님은 비슷한 상황이면 어떤 기준으로 통일을 하시나요? [레이어명 작업] 그리고 또하나 사소한것일수 있는데, 튜터님은 작업하실때 레이어이름을 디자인 할때마다 그때그때 수정하시나요? 빠르게 작업하다보면 신경을 못쓸때가 있는데 나중에 정리하려면 너무 레이어가 많아서 엄두가 안나더라구요. 이런경우는 디자인시스템이 확립되면 많이 수월해질것같은 부분이긴 하지만요. 레이어 이름을 매번 수정해야하는것, 그리고 어떤 레이어이름을 써야할지 이또한 컴포넌트화되어있지 않으면 매번 통일해서 쓰기가 (다른 디자이너와도 일관되게 사용하는게 어렵고, 스스로도 대소문자, 레이어 명칭을 모든 화면에 통일해서 쓰는게) 번거롭고 일관성 유지하기가 어렵다는 생각이 드는데 이런 어려움이 있으셨거나 해결하고 계신 방법이 있으신지 문득 궁금하여 긴 질문글 남깁니다..! [라이브러리를 고려해 디자인시스템을 만들때 주의할점] 저희 개발자분들이 tailwind, shadcn 라이브러리를 사용하는데.. 라이브러리를 고려해 디자인시스템을 만들때 주의해야하는점이 있을까요? 디자인시스템을 막 만들려고 하는 초기단계라, 어떤점을 고려해야좋을지싶어서요. 우선은 컴포넌트의 경우 라이브러리를 활용할수있는 컴포넌트(date pick과 같은)는 디자인을 해놓지 않고, 라이브러리에 없거나, 있다고하더라도 다른 형태의 디자인이 필요하다 생각하는경우는 디자인팀에서 컴포넌트로 만들고 개발팀에서 사용하게 하는 방식을 고민해보고 있어요. 라이브러리마다 토큰 형식이 정해져있다면 그 방식도 따라야하나 싶은데, 토큰은 라이브러리와 관계없이 정해도 되는걸까요? (추후 주로 쓰는 라이브러리가 변경될수도 있으니..?) [멀티프로젝트 대응을 위한 디자인시스템] 디자인시스템 만드는 과정에서 너무많은 변수를 고민하고, 완벽한 시스템을 기준에 두고 생각하다보니, 보게되는 자료도 너무많고, 각 회사마다 스타일도 다르고 이것저것 고민하다보니 속도가 안나서 고민이었거든요.. 특히나 지금 만들려고하는 시스템은 멀티브랜드도 아니고 멀티 프로젝트에 대응할수있는것을 만들려다보니, 보통은 인하우스나 멀티브랜드용 시스템들이라 이런 목적의 디자인시스템 케이스가 없더라구요. 이런경우에도 강의에서 멀티브랜드용으로 생성했던 테마 베리어블을 적용하면 이점이 많이 있을까요? 이렇게 에이전시성격의 멀티프로젝트를 응대하는 디자인시스템중에 참고할만한 레퍼런스가 있는지 아시는지도 궁금해 함께 여쭤봅니다..! 사소한 질문들도 남긴것 같아서 다소 질문이 길어졌네요.. 천천히 답을 주셔도 너무 감사할것 같습니다! 그럼 좋은하루되세요 🙂
-
미해결나만의 포트폴리오 웹페이지 만들기
동영상을 최신버전에 맞게 업그레이드 해주시거나 css적용이 안되는 원인과 해결방법을 빠르게 써주실 수 있나요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="Chrome"> <meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, minimum-scale-1.0, user-scalable-no"> <title>Portfolio - Navbar</title> <!-- saved from url=(0013)about:internet--> <!-- icon --> <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="/css/portfolio.css"> </head> <body> <header class="header-area navbar-fade" id="header"> <nav class="Navbar"> <a class="Navbar-brand" id="navbarBrand">logo</a> <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a> <div class="Navbar-menu" id="menu"> <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div> <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div> <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div> <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div> </div> </nav> </header> <!-- user script --> <script src="portfolio.js"></script> </body> </html>웨에거는 portfolio.html이고 아래거는 portfolio.css인데, 아이콘 적용도 안되고, css적용도 안되요! 고쳐주세요!/* COMMON */ * { margin: 0; padding: 0; font-size: 0; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: break-all; font-family: 'Heebo', sans-serif; } img { width: 100%; height: 100%; } a { text-decoration: none; font-size: 14px; text-transform: uppercase; } ul { list-style-type: none; } /* HEADER */ .header-area { position: relative; top: 0; left: 0; width: 100%; z-index: 99; background-color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .navbar-fade { animation-name: navbar-fade; animation-duration: 0.5s; -webkit-animation-name: navbar-fade; -webkit-animation-duration: 0.5s; } @keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } @-webkit-keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } .header-area.navbar-fixed { position: fixed; } .header-area > .navbar { width: calc(100% - 120px); margin: 0 60px; overflow: hidden; } @media (min-width: 992px) { .header-area > .navbar { max-width: 900px; margin: 0 auto; } } @media (min-width: 1200px) { .header-area > .navbar { max-width: 1000px; } } .header-area > .navbar > .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } .header-area > .navbar > .navbar-toggler * { font-size: 32px; } .header-area > .navbar > .navbar-toggler { float: right; height: 70px; line-height: 70px; font-size: 32px; cursor: pointer; } @media(min-width: 992px) { .header-area > .navbar > .navbar-toggler { display: none; } } .header-area > .navbar > .navbar-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 70px; left: 0; width: 100%; height: 200px; transition: 0.5s ease; overflow: hidden; } .header-area > .navbar > .navbar-menu.show { height: 200px; } .header-area > .navbar > .navbar-menu > .nav-item { float: none; display: block; height: 50px; line-height: 50px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: rgba(0, 0, 0, 0.4); } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding-left: 50px; color: white; cursor: pointer; } @media (min-width: 992px) { .header-area > .navbar > .navbar-menu { position: relative; background-color: transparent; float: right; top: 0; width: auto; height: auto; transition: none; } .header-area > .navbar > .navbar-menu.show { height: auto; } .header-area > .navbar > .navbar-menu > .nav-item { display: inline-block; height: 70px; line-height: 70px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: transparent; } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding: 0 20px; color: black; } }css파일을 css폴더에 넣고 <link rel="stylesheet" href="/css/portfolio.css">로 불러오기를 했는데 안되요!
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2025년 실기준비할때도 참고하면 좋을 강의일까요?!
아직 결제만하고 강의시청은 안한상태인데2025년 웹디자인개발기능사로 바뀌는데내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!?혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다.답변주시면 감사하겠습니다.!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
컬러선택시 아이콘 컬러가 리스트에서 안보여요
BOLD PLUS Foundation v1.2.1 (Community)이 버전을 Added 하고 실습을 따라하고있는데요. 아이콘을 선택하고 color/icon/interactive 가 활성되지않습니다. color/bg border 등은 다 보이는데 icon 컬러만 안보입니다. 어떻게 하면될까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
제플린 핸드오프에 관련 질문입니다.
제플린을 통한 핸드오프는 훨씬 까다로운 절차가 있는 것 같은데 따로 강의편까지 해주신 이유가 궁금합니다.현업에서 제플린을 많이 사용하기 때문일까요, 아니면 제플린만의 강점이 있는 것일까요? 이니면 다른 이유가 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Frame 생성 시, layer가 모이지 않음
안녕하세요, 강의에서 나온대로 Frame 생성 후 layer를 수정하려고 하는데, 화면이 보이지 않습니다. 확인 부탁드립니다! 감사합니다
-
미해결피그마 시작하기
태그부분이 아래로 안떨어집니다
안녕하세요 강의 잘듣고 있습니다. 다름이 아니라 태그부분과 텍스트부분 오토레이아웃으로 설정하는 과정에서 태그부분의 방향을 Wrap으로 설정하였는데도 아래로 떨어지지 않는 이슈가 발생하여 문의드립니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
라이브러리 세팅과 연결 관련 질문드립니다.
안녕하세요~ 현재 [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 부분을 듣고 있는데어디서 잘못 된 건지 알 수 없어 이렇게 질문 드립니다. [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 에서 라이브러리를 발행하는 건앞강의에서 실습한 베리어블 파일 말고 올려주신 BOLD PLUS Foundation v1.2.1를발행하는 걸로 이해했는데 맞을까요?UI component library space 파일은 그냥 제가 따로 새 파일을 만드는건가요?아니면 혹시 파일을 공유해 주신 걸까요?일단 제가 UI component library space파일을 새로 만들고 영상대로따라 해본다고 했는데 뭐가 잘못 된건지 에셋들이 뜨지 않고 계속아래 이미지로 보이는데 어떻게 하면 퍼블리시한 에셋들이 보일까요? ㅜㅜ
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
화면이 안바껴요ㅠ
/* Tab Content */ .tab-inner { width: 97%; margin: auto; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 120px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; } .btn span.active { background-color: #fff; } .tabs {} .tabs div { border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1 {} .tab1 a { display: block; padding: 3px; border-bottom: 1px solid #333; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { display: none; text-align: center; } .tab2 img { margin-top: 25px; width: 110px; } // Tab Content $('.btn span:first-child').click(function(){ $('tab1').show() $('tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('tab2').show() $('tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })이렇게 작성하였는데 갤러리를 눌러도 공지사항 내용이 뜹니다ㅜ
-
미해결뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론
안좋은 ux 사례
좋은 ux 사이트는 워낙 많아서 생각하기 어려워서 안좋은 ux 사례부터 찾았어요ㅎㅎ webflow https://webflow.com/?r=0웹사이트를 플랫폼을 통해 만들게 하는 회사인데, 회사를 소개하는 홈페이지와 dashboard 가 뒤섞여 있어 사용하기 불편해요.정보설계가 약한 듯 해서 gnb에서도 불편함을 느끼는데요. 이 경우에는 (depth1)product > (depth2)designer 로, 일반적으로 사람들이 기대하는 페이지를 보여주는 반면 이 경우에는 (depth1)resources > (depth2)templates를 클릭하면 아예 새로운 웹사이트로 넘어가요.두 사진의 gnb 쪽을 비교해보시면 아예 다르다는걸 보여줍니다.. 그렇다고 외부 페이지도 아니고 플랫폼을 사용할 수 있는 dashboard와 통합된 페이지도 아니고 단독 사이트로 넘어갑니다. 이런 경우 외부사이트로 넘어간다는 아이콘과 함께 새로운 페이지가 나오는 것이 낫지 않을까? 하는 생각이 들었습니다.많은 서비스와 정보를 담은 웹사이트기 때문에 복잡할 수 밖에 없는 것을 알지만 사용자로서 예측가능하기 힘든 웹사이트라는 판단이 듭니다! 감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토레이아웃
오토레이아웃 추가를 하면 강의에서처럼 박스 두개 모양이 아니라 그래프 같은 모양이 생기고 글자를 수정해도 박스 크기가 안변해요ㅠㅠㅠ
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
왜 헤더만 div로 안묶나요?
전 영상들부터 모두 container slide items footer모두 div태그인데 header만 왜 <div class="header">가 아닌 그냥 header인가요?
-
해결됨부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프
스텝7 분량은어느정도될까요?
갠적으로 앞으로 오픈할 강좌로드맵에 스텝7이 관심이가는데 (강의시간)분량이 어느정도될까요?
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
애니메이션 시간차
animation.css에서 강의대로 animate__fadeInLeftBig을 가져왔는데 첫 슬라이드는 자연스럽게 나옵니다. 두번째 슬라이드에서는 중간에 살짝 덜컹거리듯이 하며 나오는 문제와 next 버튼을 클릭했을 때 다음 화면을 넘어가게 되면 애니메이션 텍스트의 나타나는 시간과 이미지가 슬라이드되서 보여지는 시간 차이가 납니다.혹시 animatin.css 에서 선언된 애니메이션 옵션이 변경 가능한지 궁금합니다.
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
프로 다운어떻게 요청드리면 되나요?
어디로 요청드리면 되나요?~
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강이벤트
안녕하세요.완강 후 설문조사와 수강평을 남겼습니다.선물혜택은 메일로 발송이 되나요?감사합니다.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디스코드 채널에 들어가지지 않습니다.
디스코드는 이제 들어갈 수 없는걸까요? 링크로 진입했는데 초대를 수락할 수 없다고 뜨네요.
-
미해결애플 웹사이트 인터랙션 클론!
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
안녕하세요 선생님!예전에 선생님 강의 청첩장강의랑 flex,grid, 기타 강의들 구매하고 들었던 학생입니다.선생님은 메인개발분야가 뭔지 궁금합니당.또 리액트 사용하시는지도 궁금합니다!질문과는 무관한 여담이지만,,최근 리액트로 프로젝트하면서 애니메이션 편하게 구현하기위해서 여러 라이브러리를 사용하고 또 gsap관련해서도 찾아보고 했었는데.. gsap로 이렇게 손쉽게 인터랙티브 애니메이션을 구현할 수있다고? 하면서 혁신이다! 라고 생각했었는데보니깐 자체 서비스에서 결제 같은 기능이있을경우 (넷플릭스같은) gsap 프리미엄을 결제해서 사용해야하더라구요..그것도 연간 구독 시스템이고, 코딩하는 개발자 수에따라서 개별로 구매..ㅎㄷㄷ 그래서 돌고돌아 다시 선생님 곁으로왔습니다.이 강의 듣다가 개인적인 일들이 겹쳐서 중간하차했었는데 다시 처음부터 차근차근 수강하고 복습해서 마스터해보려고합니닷.. 질문 요약1: 선생님 메인분야가 뭐에요?2: gsap에 관해서 의견이궁금합니다.
