마디아님 질문이 하나 있습니다. 저는 진작 은퇴를 했어야 할 60 중반도 넘은 디자이너입니다만 어쩌다보니 뒤늦게 UI 디자인을 독학으로 배워 업무를 진행하고 있습니다. 시각디자인을 전공했다는 이유로 겁없이 웹디자인 업무를 덜걱 받아 맨땅에 헤딩하는 느낌으로 일을 시작했는데 몇달간 고생을 하다보니 어느 정도 일을 한다 싶었는데 최근 생각지 못했던 문제가 하나 생겼습니다. 여쭙고 싶은 내용은 이렇습니다. 예를 들어 XD로 버튼 디자인을 할 때 XD안에서는 그림자 효과를 주어도 버튼 사이즈에 변화가 없지만 작업한 내용을 내보내기 하면 그때는 그림자 사이즈까지 포함된 사이즈로 변화가 됩니다. 즉 20X20(그림자가 있거나 없어도 )이었던 버튼 사이즈가 내보내기를 한 후에는 23x23으로 바뀌는 것입니다. 이럴 경우 개발자가 후반 작업을 할 때 사이즈 오차로 인식하지 않을까 해서요. 개발자에게 자문을 구해도 애매한 대답을 해서(나이차가 워낙 많이 나다 보니 허심탄회한 대화가 좀 힘드네요) 과연 어떻게 해야 할지 고민이 깊습니다. 물론 사이즈가 커졌다고 해서 공간 문제가 있지는 않습니다. 그림자를 제외한 실제 버튼의 사이즈는 그대로 이기 때문입니다. 제 생각에는 제플린으로 디자인 시안 도 같이 넘겨주기 때문에 문제가 없지 않을까 싶습니다만 아들 뻘인 개발자에게 책 잡히기 싫어서 어떻게 대응을 하나 싶어 이렇게 두서 없이 글을 남깁니다. 공짜로 귀한 강의를 듣고 있습니다만 현명한 답변 주시길 부탁드립니다. 그럼 건승하시길 바랍니다. 감사합니다.
안녕하세요 디자이너 마디아입니다. 버튼의 사이즈가 다르게 나가는 경우는 그림자 영역까지 이미지 영역을 포함하고 있어 사이즈가 다르게 보이는 것으로 판단이 됩니다. 이 부분은 이미지로 내보내면 어떻게 내보내셔도 같은 문제가 발생하게 될 것으로 예상됩니다. xd 자체에 그림자 X, Y, B 값이 있어 그 값으로 직접 코딩에 적용을 하시면 문제는 해결 될 것으로 보입니다. 제플린으로 넘겨도 결국 이미지로 뽑으면 같은 문제가 생길 것으로 판단이 됩니다. 이 부분을 이미지로 해결 하려면 버튼, 그림자 따로 2개를 분리 시켜서 전달 해야 하는데.. 그렇게 하려면 디자인 작업 자체도 그라디언트 및 흐림효과 등을 활용해서 그림자를 제작하셔야 합니다. 그림자를 바닦에 깔고 그 위에 버튼을 올려야 하는 방법으로.. 감사합니다. 마디아 올림.
안녕하세요. 저는 중소기업에 다니는 프로그래머입니다. XD는 안써봐서 모르겠지만, 저희 회사에서는 디자인 하시는 분이 저에게 Figma 링크를 주십니다. 이미지는 제가 Export해서 작업합니다. 댓글 써주신 거와 같이, Figma에서도 그림자 있는 이미지를 Export하면 그림자가 이미지에 포함되어서 중앙 정렬이 안맞더라고요... 그래서 그림자가 있는 이미지는 그림자 값만 보고, Export할 때만 잠시 그림자를 끈 뒤 Export합니다. 그림자는 따로 코딩으로 넣습니다.
@@mingyu243 조언 감사드려요. 질문에 대한 해결책은 그림자로 커진 사이즈까지 포함하는 투명 PNG 파일을 만들어 그루핑을 한 후 그걸 export하는 방법을 선택했습니다. 번거롭기는 하지만 일단 문제는 해결됐습니다. (그림자 값 1마다 아이콘 사이즈가 3픽셀이 커지더군요. 그래서 20x20 사이즈를 23x23 png 투명 파일 안에 넣어서 그루핑) 여담으로 xd보다 피그마가 더 유명(??)한 듯한 느낌이라 시간이 되면 피그마 툴도 사용해 보려 합니다. 그리고 궁금 사항 하나가 또 있는데요... 졔가 현재 하고 있는 작업이 의료용 소프트웨어인데 아이콘 크기가 워낙 작아서 선명도가 문제가 되더군요. 이럴 경우 가장 선명한 이미지를 얻으려면 어떤 과정을 거쳐야 할까요? 예를 들어 xd에서 디자인한 것과 일러로 작업한 것 또는 포토샵으로 한 것 등등의 방법 중에서 말입니다. 글 내용이 두서가 없어 하고픈 말을 제대로 했는지 걱정입니다만 조언에 다시 한 번 감사드립니다. ^^
