예제파일

안녕하세요, 프로젝트빌드업님. 현재 강의에서 사용되는 모든 예제 파일은 Practice v1 폴더 안에 포함되어 있습니다.혹시 제가 실수로 누락한 부분이 있다면, 원하시는 예제의 스크린샷이나 구체적인 설명을 보내주시면 감사하겠습니다. 확인 후, 빠르게 업데이트하여 반영하도록 하겠습니다.감사합니다. 볼드 드림.

다크모드 수업에서 사용하는 피그마 파일은 뭔가욤?

안녕하세요.강의에서 사용되는 파일은 제 강의 프레젠테이션 파일이며, 이는 공유해드리지 않고 있습니다. 감사합니다.

뒷부분 강의 파일이 없는거 같애영

안녕하세요, culwonder.company 님 현재 강의 파일은 2023년 강의 오픈 후 저작권 및 도용 문제로 인해 더 이상 전체 파일을 제공해드리고 있지 않습니다. 다만, 강의 초반 개념 부분을 어려워하시는 분들이 많아 그 부분에 한해서만 노션(Notion) 을 통해 정리하여 제공해드리고 있습니다. 또한, 최근 몇몇 유튜버분들이 제 강의를 무단으로 도용하여 사용하신 사례가 있어 경고 조치를 취한 적도 있습니다. 이 부분은 강의자의 지적 재산권 및 권한과 관련된 사항이므로 부득이하게 양해 부탁드립니다. 어려운 부분들은 질문을 통해서 복습하고 개념을 익혀나가시는 것을 추천드립니다.감사합니다.

image aspect ratio

안녕하세요, 우선 강의 촬영 시점과 현재 버전이 달라 플러그인이 없어져 혼동을 드려 죄송합니다. 피그마 업데이트로 Lock ratio 기능이 플러그인 없이도 피그마 안에서 바로 지원됩니다.아래 이미지처럼 프레임이나 도형의 Layout 메뉴에서 가장 오른쪽 버튼을 클릭하시면, 설정된 비율에 따라 크기가 자동으로 조정됩니다. (사진) 단, 버튼을 누르기 전에 미리 비율 계산을 해두셔야 합니다.예를 들어 4:3 비율이라면 400×300 크기로 설정 후 컴포넌트화하시면 됩니다. 이 부분에 대한 설명도 강의에 곧 추가하도록 하겠습니다.감사합니다. 볼드 드림.

스쿼드가 뭔가욤 -_-;

안녕하세요, culwonder.company님. 우선 질문 주셔서 감사합니다. 강의에서 언급된 ‘스쿼드(Squad)’는 문맥에 따라 여러 의미로 쓰일 수 있지만, 이 강의에서의 ‘스쿼드’는 ‘팀(Team)’이라고 이해하시면 됩니다. 이 용어는 원래 스포티파이(Spotify)라는 회사의 조직 운영 방식에서 시작된 개념으로, IT 기업이나 스타트업에서 자주 사용됩니다. 특히 애자일(Agile) 조직 구조에서 ‘스쿼드’는 자율적으로 일하는 소규모 팀을 의미합니다.보통 하나의 스쿼드는 디자이너, 개발자, 기획자, 마케터 등 다양한 역할을 가진 사람들이 모여, 특정 목표를 향해 함께 협력하는 단위로 구성됩니다. 예를 들어, 디자인 시스템 스쿼드는 디자인 시스템 유지 보수만을 목적으로 만들어진 팀이라고 보시면 됩니다. 제가 강의에서 이 부분을 자세히 설명드리지 못한 점은 제 불찰입니다.수강하시는 분들께서 이미 알고 계실 거라 생각했지만, 앞으로는 이런 용어들도 더 친절하게 풀어드리도록 하겠습니다. 😊 좋은 질문 보내주셔서 다시 한 번 감사드립니다.볼드 드림.

8:00 시점에서 오리고 붙여넣기가 안돼요

안녕하세요, 프로젝트 빌드업님. 제가 직접 강의를 따라 해보니 정상적으로 작동하는 것을 확인했습니다.먼저 아래 세가지를 꼭 체크해보시기 바랍니다.단축키프레임이 아닌 도형벡터 활성화 1. 단축키를 한 번 확인해 보시기 바랍니다.도형 오려두기Windows: Ctrl + XMac: Command + X 도형 붙이기Windows: Ctrl + VMac: Command + V 2. 오려서 붙이려는 오브젝트가 반드시 도형(Shape)이어야 합니다.❌ 프레임(Frame) 의 경우에는 적용되지 않습니다. 3. 펜툴을 사용하실 때는 반드시 캔버스 위 아무 곳이나 한 번 클릭하여 활성화시켜야 합니다. 위 단계를 모두 진행하셨음에도 불구하고 여전히 작동하지 않는다면,추가로 문의 주시면 확인해드리겠습니다. 감사합니다.

[gif첨부] 아이콘 사이즈 설정 Instant swap property

답변이 늦어져서 죄송합니다. 우선, 인스턴스 스왑을 진행하면 전체가 함께 변경되기 때문에 24px과 20px을 혼용하여 사용하는 것은 어렵습니다. 아래에 참고용 파일을 첨부드렸습니다. 해당 파일에 보다 자세한 내용이 정리되어 있으니 한 번 검토해보시기 바랍니다. 첨부된 파일에서는 세 가지 방법을 제시하고 있으며, 각 방법마다 고유한 특징이 있습니다.그중 방법 1은 현재 사용하고 계신 방식으로 보입니다. 완벽한 방법은 없으며, 각 접근법마다 장단점이 존재합니다.개인적으로는 방법 2가 보통 리액트 아이콘 컴포넌트 개발 방향과 가장 잘 맞는다고 생각합니다. 한번 검토해보시고, 추가로 궁금한 점이 있으시면 언제든 말씀해 주세요.https://drive.google.com/file/d/17A7x7sHrziBRn94LXHqQOQsXk8cYy04T/view?usp=sharing

Create Instance swap Property 안보이는 이유

질문이 해결된 것 같습니다. 감사합니다.

Image placeholder 그룹화

안녕하세요, orehi3634님 밑에 인프런 인턴이 자세하게 답변해주어서 놓치고 지나갔네요. 우선 남겨주신 질문에 저의 답변이 늦은 점 죄송합니다. 이번에 Lock Aspect Ratio이 플러그인이 없어졌습니다. 그리고 이제 피그마 안에서 이미지 비율을 고정할 수 있습니다. 이 경우에 안에 만드신대로 Group1 안에 Frame 이미지를 넣으셔도 됩니다.아니면 Group1 최상의 레이어만 남겨두셔도 무방합니다. 하지만 만약 코드랑 비슷하게 하고 싶다면, 보통은 div 안에 img 를 넣는 편이라 만드신 것을 좀 더 발전 해나가시면 될 것 같습니다. Group1 - 이미지 프레임/래퍼 (보통 div)Frame - 이미지 (보통 img) 그리고 이 경우에는 Group1 최상단에서 피그마 레이아웃에서 W,H 옆에 아이콘 눌려주시면 비율이 고정이 됩니다. 그리고 하단 Frame의 경우에는 Constraints에서 상하좌우를 하시면 괜찮을 거 같습니다. Group1은 16:9를 하고 싶의면 임의로 160:90으로 만들고 비율 고정 후 원하시는 크기로 바꾸시면 됩니다. 도움이 되시라고 아래 이미지도 첨부해드렸습니다. (사진)레이어 구성(사진)Image Frame: 16:9로 비율 고정하기(사진)Image: 내부 이미지 프레임 컨스트레인 설정: 이렇게 하면 Image Frame이 커지면 같이 따라옴. 감사합니다. 볼드 드림.

디자인시스템 관련

안녕하세요, snowmanoh님.우선 좋은 질문 주셔서 감사합니다.저는 디자이너 없이도 디자인 시스템을 구축하는 것은 충분히 가능하다고 생각합니다. 많은 분들이 ‘디자인’이라는 단어 때문에 반드시 디자이너가 있어야 한다고 생각하시지만, 실제로는 그렇지 않습니다. 그리고 초기 단계에서는 인력과 시간이 한정되어 있기 때문에, 새로 모든 것을 만드는 것보다 기존의 라이브러리를 활용하는 것이 훨씬 효율적입니다. 특히 B2B 서비스의 경우, 심미적인 완성도보다 기능적 안정성과 효율성이 훨씬 더 중요하기 때문에, 초반부터 디자인 리소스에 많은 투자가 꼭 필요하다고 보지 않습니다. 실제로 아마존의 일부 AWS 서비스만 봐도 “이게 디자이너가 만든 게 맞나?” 싶은 부분이 있을 정도죠. 반면, 디자인 시스템에서 개발자의 역할은 필수적이라고 생각합니다. 특히 요즘처럼 AI 툴이 있는 경우에서는 사실 기획자와 디자이너 사이의 경계가 점점 줄어들고 있습니다. 제가 일하는 곳의 PM의 경우 러버블 같은 툴을 활용해 프로토타이핑을 하거나, v0에 디자인 시스템을 연결해 직접 디자인 흐름을 잡기도 합니다. 그래서 해외에서는 기획자와 디자이너의 역할 구분이 뚜렷하지 않은 경우가 많고, 그만큼 프로덕트 디자이너 역할이 이 둘을 모두 커버하며, 사용자 경험(UX)에 더 집중하는 역할로 바뀌고 있습니다(비즈니스 부분도 강조되고 그래서 데이터 역량도 요구 되고 있고요) 추천드리고 싶은 방법은, 디자인 시스템을 처음부터 직접 다 만들기보다는, 개발자와 협의하여 현재 사용하는 기술 스택과 프레임워크를 확인한 후 이미 존재하는 시스템을 적극 활용하는 것입니다. 예를 들어 머티리얼(Material)을 사용 중이라면, 이미 완성된 머티리얼 디자인 시스템을 기반으로 시작하시고, 필요한 부분만 커스터마이징하시면 됩니다. 이는 제 강의를 통해서도 그러한 접근법을 쉽게 익히실 수 있을 거예요. 결국 우리가 서비스를 만드는 일은 ‘아트’를 만드는 게 아니라, 사용자의 멘탈 모델에 맞춘 효율적인 인터페이스를 설계하는 일입니다. 예를 들어 버튼 하나를 디자인한다고 해도, 남들과 전혀 다른 형태나 새로운 인터랙션을 만드는 게 아니라, 사용자가 익숙하게 인식할 수 있는 형태의 버튼을 만드는 것이죠. 특히 제 강의는 개발자 분들이 많이 들으시는데, 다 듣고 나시고 실제 개인프로젝트, 그리고 회사에 사용하시는 분들을 많이 보았습니다. 디자인 감각이 없으셔도 충분히 하실 수 있습니다. 감사합니다.볼드 드림.