이 정도는 이제 그려야죠? 전화기 그리는 여러 가지 방법

[@-doggutak9295]

너무 좋아요! 항상 다른아이콘들은 금방 그렸는데 전화기 만들때마다 한참을 건드렸어야 했거든요! 잘 배워갑니다!

[@jisanlee2360]

??? 내가 모르는 사이에 완성이 되어버렸다

[@UXUIDesign]

생각보다 쉽죵?!

[@남경우-n3b]

마디아님 질문이 하나 있습니다. 저는 진작 은퇴를 했어야 할 60 중반도 넘은 디자이너입니다만 어쩌다보니 뒤늦게 UI 디자인을 독학으로 배워 업무를 진행하고 있습니다. 시각디자인을 전공했다는 이유로 겁없이 웹디자인 업무를 덜걱 받아 맨땅에 헤딩하는 느낌으로 일을 시작했는데 몇달간 고생을 하다보니 어느 정도 일을 한다 싶었는데 최근 생각지 못했던 문제가 하나 생겼습니다. 여쭙고 싶은 내용은 이렇습니다. 예를 들어 XD로 버튼 디자인을 할 때 XD안에서는 그림자 효과를 주어도 버튼 사이즈에 변화가 없지만 작업한 내용을 내보내기 하면 그때는 그림자 사이즈까지 포함된 사이즈로 변화가 됩니다. 즉 20X20(그림자가 있거나 없어도 )이었던 버튼 사이즈가 내보내기를 한 후에는 23x23으로 바뀌는 것입니다. 이럴 경우 개발자가 후반 작업을 할 때 사이즈 오차로 인식하지 않을까 해서요. 개발자에게 자문을 구해도 애매한 대답을 해서(나이차가 워낙 많이 나다 보니 허심탄회한 대화가 좀 힘드네요) 과연 어떻게 해야 할지 고민이 깊습니다. 물론 사이즈가 커졌다고 해서 공간 문제가 있지는 않습니다. 그림자를 제외한 실제 버튼의 사이즈는 그대로 이기 때문입니다. 제 생각에는 제플린으로 디자인 시안 도 같이 넘겨주기 때문에 문제가 없지 않을까 싶습니다만 아들 뻘인 개발자에게 책 잡히기 싫어서 어떻게 대응을 하나 싶어 이렇게 두서 없이 글을 남깁니다. 공짜로 귀한 강의를 듣고 있습니다만 현명한 답변 주시길 부탁드립니다. 그럼 건승하시길 바랍니다. 감사합니다.

[@UXUIDesign]

안녕하세요 디자이너 마디아입니다. 버튼의 사이즈가 다르게 나가는 경우는 그림자 영역까지 이미지 영역을 포함하고 있어 사이즈가 다르게 보이는 것으로 판단이 됩니다. 이 부분은 이미지로 내보내면 어떻게 내보내셔도 같은 문제가 발생하게 될 것으로 예상됩니다. xd 자체에 그림자 X, Y, B 값이 있어 그 값으로 직접 코딩에 적용을 하시면 문제는 해결 될 것으로 보입니다. 제플린으로 넘겨도 결국 이미지로 뽑으면 같은 문제가 생길 것으로 판단이 됩니다. 이 부분을 이미지로 해결 하려면 버튼, 그림자 따로 2개를 분리 시켜서 전달 해야 하는데.. 그렇게 하려면 디자인 작업 자체도 그라디언트 및 흐림효과 등을 활용해서 그림자를 제작하셔야 합니다. 그림자를 바닦에 깔고 그 위에 버튼을 올려야 하는 방법으로.. 감사합니다. 마디아 올림.

[@남경우-n3b]

@@UXUIDesign 아~ 그렇군요. 일단 머릿속으로는 이해가 되었으니 실전에 적용을 해보겠습니다. 성실한 답변 감사드립니다. 늘 성공하시는 디자이너가 되시길 바랍니다. 감사합니다. :)

[@mingyu243]

안녕하세요. 저는 중소기업에 다니는 프로그래머입니다. XD는 안써봐서 모르겠지만, 저희 회사에서는 디자인 하시는 분이 저에게 Figma 링크를 주십니다. 이미지는 제가 Export해서 작업합니다. 댓글 써주신 거와 같이, Figma에서도 그림자 있는 이미지를 Export하면 그림자가 이미지에 포함되어서 중앙 정렬이 안맞더라고요... 그래서 그림자가 있는 이미지는 그림자 값만 보고, Export할 때만 잠시 그림자를 끈 뒤 Export합니다. 그림자는 따로 코딩으로 넣습니다.

[@남경우-n3b]

@@mingyu243 조언 감사드려요. 질문에 대한 해결책은 그림자로 커진 사이즈까지 포함하는 투명 PNG 파일을 만들어 그루핑을 한 후 그걸 export하는 방법을 선택했습니다. 번거롭기는 하지만 일단 문제는 해결됐습니다. (그림자 값 1마다 아이콘 사이즈가 3픽셀이 커지더군요. 그래서 20x20 사이즈를 23x23 png 투명 파일 안에 넣어서 그루핑) 여담으로 xd보다 피그마가 더 유명(??)한 듯한 느낌이라 시간이 되면 피그마 툴도 사용해 보려 합니다. 그리고 궁금 사항 하나가 또 있는데요... 졔가 현재 하고 있는 작업이 의료용 소프트웨어인데 아이콘 크기가 워낙 작아서 선명도가 문제가 되더군요. 이럴 경우 가장 선명한 이미지를 얻으려면 어떤 과정을 거쳐야 할까요? 예를 들어 xd에서 디자인한 것과 일러로 작업한 것 또는 포토샵으로 한 것 등등의 방법 중에서 말입니다. 글 내용이 두서가 없어 하고픈 말을 제대로 했는지 걱정입니다만 조언에 다시 한 번 감사드립니다. ^^

[@mingyu243]

@@남경우-n3b 그래픽 쪽을 잘 몰라서,.. 프로그래머 관점에서는 SVG 벡터파일로 이미지를 받으면 확대해도 안깨집니다.

[@ohjeeni]

다자인 1도 모르는 그냥 시청자인데...전화기 그리는게 이렇게 어려운거구나....😂 목소리 넘 좋아영

[@TV-fx3oh]

툴으로 펜 그렸는데 왜 선이 바깥으로 어긋나는 걸까요? 어떻게 하면 도형에 딱 맞춰서 선을 그릴 수 있나요? 자세히 알려주시면 감사하겠습니다.

[@barunbooks]

으아~ 이 유튭을 이제야 알게되다니!! 완전 꿀팁 대방출 유튭이네요 ~~ 감사합니다!

[@UXUIDesign]

감사합니당! ㅎㅎ

[@수필누리]

가이드 만들거나 할 때 계속 1픽셀씩 차이가 나요ㅠㅠ 만약에 140픽셀이면 딱 맞춰서 못 만들고 139나 141픽셀로만 되는데 어떡하죠... 이러다보니 나중에 쉐입빌더로 만들 때 조금씩 차이나서 이상한 부분이 생기네요

[@정민-z3w]

0:36 쌤 알트 안눌러도 그냥 클릭하면 사이즈 조절창 뜨는데 혹시 차이점이 있을까요?

[@효링-z5f]

전화기 아이콘 그리기 영상 올라왔군요!ㅎㅎ 감사합니다!!

[@No_Exit_KangMina]

꿀팁 감사합니다😊

[@구이-e9z]

수강 완료🙌 감사합니당

[@apl2215]

애플로고랑 트위터 로고도 잘하실 것 같아요. (기대)

[@나는JH]

피그마로는 Shape Builder Tool이 없어서 불가능한가요??

[@Homesikboy]

와 오각형은 대박이네용

[@UXUIDesign]

파이팅!! 어렵지 않아요~

[@whyistheballround]

선생님 너무 알찹니다

[@yunyun-b3m]

안녕하세요! 디자이너님 ,방학에 혼자 영상보고 배우려고 하는 학생입니다 ㅠㅠ 처음 도화지 규격이 몇 px 인가요? 규격이 달라 따라 해볼수가 없어서 고민이에요

[@kimhaeun3862]

피그마도 자주 사용하시나용??

[@까꿍정석]

마디아 형, 제가 항상 일러를 하다가 궁금한게 있었는데, 오프셋 패스하실때 예를들어 50픽셀 10픽셀 이런거여. 기준을 어떻게 잡는거예요?

[@Realfrogmanship]

도형을 만들면 테두리 안쪽이 다 채워져서 보여요.. 어떻게 윤곽선만 보이게 하나요?

[@일하기싫어24]

???: 오늘은 전화 아이콘을 그려볼게요? 어때요? 참쉽죠? 구독자: 선생님, 진도가 너무 빠릅니다!!!

[@PPCL-o2s]

아 여태까지 그냥 한쪽만 그리고 좌우 반전 시켜서 붙였는데 이런 방법도 있네😮

[@mukeda6758]

간단하게 그리는 방법 보고 있는데 전화기 모양은 다 완성되었고 각 모서리의 라운드를 주는 점이 전 왜 안 나올까요 ㅠ

[@mukeda6758]

일러스트 26.2버전입니다! 네모는 되는데 전화기모양만 안되네요..

[@Louisvuitton100]

근데 일러로 그려서 포샵에 가져와서 사용할때 스마트오브젝으로 가져와야 깨지지않고 크기 조절하며 쓰기 편한건가용? 뭐로 가져오는게 제일 베스트일까요?

[@daekue123]

벡터가 베스트죠

[@디스이즈어스]

@?#@?#@#?@#? 혼란스럽다