AutoLayout의 가로 간격 설정
AkzidensGrotesk opened this issue · comments
안녕하세요, 이번엔 또 새로운 이슈가 발생했습니다!
첫 번째 이슈는 AutoLayout의 가로 간격 설정에 대한 것입니다.
무사히 겹치는 오브젝트를 넣는 데에는 성공했으나, 이번엔 AutoLayout의 가로 간격 설정에 혼란이 와버렸습니다...
이미지의 위쪽 리스트는 작은 단위(도형과 텍스트가 결합된 AutoLayout) 묶음에 padding을 설정하여 간격을 주었고, 아래쪽은 리스트를 묶은 AutoLayout에 간격을 설정한 경우입니다.
위 아래 가장 작은 단위 묶음을 preview해보면 의도한대로 잘 나오나, 그 상위 묶음에서는 이러한 이슈가 발생하는 것을 확인하였습니다.. 😢
두 번째 이슈는 Box의 정렬입니다.
두 번째 이미지에서 "로렘 입숨 데스크탑을 지금 바로 편리하게 이용해보세요!" 란 텍스트는 AutoLayout상 Left-middle에 맞춰지도록 정렬을 지정했으나 preview에서는 씩씩하게 중앙에 위치한 것을 확인할 수 있었습니다. AutoLayout에서는 Left, Right, Center만 사용하고 상하 padding을 지정하는 것이 좋을까요..?
그리고 조그만 소망인데....그라데이션 처리를 한 색상도 플러그인에 보일 수 있도록 반영해주실 수 있을 지 문의드립니다!
(TMI: 디자인 작업은 MAC에서 하지만 폰트가 맑음고딕으로 설정되어있는 이유는...회사에서 제공하는 서비스들이 웹 기반이 대부분인데 서비스를 이용할 사람들은 Windows를 많이 사용할테니 그에 맞춰 작업하고 있기 때문입니다....회사 개발팀을 볶아 다른 폰트도 임베딩 해봤는데 Windows 자체에서 폰트 렌더링을 MAC보다 못생기게 해줘서 한계가 있더라구요..그래서 기본 폰트인 맑음고딕을 쓰기로 협의를 봤으나...항상 폰트가 못생겨서 눈물을 흘립니다. 근데 또 그와중에 Figma 자체 렌더링때문에 폰트가 같은 weight인데도 실제 브라우저(실서비스 화면)에서 보는 것과 비교하여 얇아보이는 부작용이 있더라구요? 아주 혼란스럽습니다.)
지난 번과 동일하게 제가 작업한 피그마는 바로 이것입니다: https://www.figma.com/file/bnU1eZWRiZCQI1fyntf3er/test-list-push?node-id=1%3A2
1
AutoLayout이 Hug이고 children은 Fixed 일때 css는 children이 fill-parent 형식으로 컨버팅 되고 있던 오류를 확인해서 수정하였습니다. 감사합니다.
2
vbox에서 middle이라는 기능을 추가했습니다.
3
우선 bg의 linear-gradient 먼저 구현했습니다. radial은 아직 진행중입니다.
4
폰트의 경우에는 어쩔 수 없는 부분이죠ㅠ 윈도우가 폰트를 그리는 알고리즘이 맥이랑 다르고 figma도 웹이지만 글자를 이미지로 그려내는 방식이라서 브라우저의 폰트와도 또 다른 느낌이죠.
이미 알고 계시겠지만 윈도우로 아래 사이트에 가서 그나마 이뻐보이는 폰트를 개발자에게 적용해달라고 해주세요.
https://fonts.google.com/
그러고 보니 Preview는 일단 기본 폰트로 보여주고는 있지만 웹폰트나 특정 폰트를 지정해서 보여주고 있지 않네요. 웹 폰트를 적용해서 어떻게 보이는지를 할 수 있는 기능도 만들어지면 공유 드리겠습니다.
5
대부분이 플러그인 문제라서 사용이 아니라 테스트를 해주신 결과가 되어 송구스럽습니다. 감사드리며 이슈 남겨주시는대로 최대한 빨리 피드백을 드리도록 하겠습니다. 감사합니다.
이렇게 빠르게 대응해주시니 제가 감사할 따름입니다... 🥺 게다가 저의 작은 소망이었던 liner-gradient까지 구현해주시다니..
덕분에 모두 플러그인에서 잘 나옵니다. 다른 작업물에도 이것저것 테스트해보며 이슈 발생 시 또 업로드 드리겠습니다. 감사합니다!
감사합니다. 이번 이슈는 close하겠습니다.(뿌듯) 다음 이슈(?)때 또 뵈요~ 감사합니다!