agilelabs

Lead 레벨

이런. 제가 놓친 부분이 있었네요. 아래 링크 참고해주세요 &nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.google.com/document/d/1JdGHLrYp1sRmnDQKNm_4Ad4hzJNzwkJG/edit">https://docs.google.com/document/d/1JdGHLrYp1sRmnDQKNm_4Ad4hzJNzwkJG/edit</a>

수업 자료 문의

안녕하세요 🙋&zwj;♀️ 이모지는 키보드에서 이모티콘 입력 단축키를 사용해주시면 됩니다&nbsp;

페이지 이름에 이모티콘은 어떻게 넣는건가요??

안드로이드만을 경우로 말씀드리면 360-640이 기본이 되는 사이즈 입니다. 1x 디바이스에서 디자인하시면 됩니다 :)&nbsp;
최근에는 360-760 으로도 작업을 많이 하고있어요&nbsp;

스케치 iOS/android 사이즈 관련 문의

안녕하세요 플린토로 작업을 한 결과물은 플린토 미러링 앱에서 구동할 수 있습니다. iOS 디바이스를 사용하고 계신다면 FLINTO앱을 다운로드 받아서 사용해보시면 좋겠습니다. 그리고 Flinto는 녹화기능이 있어서 화면의 구동되는 모습을 녹화하여 저장하시는 방법도 좋은 방법일것 같네요 :)&nbsp;

플린토 프로토타입 작업 후 공유 관련 문의

<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">1. 실무에서는 아이콘을 어느 정도의&nbsp; 탭 영역과 획 두께로 제작하는지 말씀해주실 수 있을까요?
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">(48dp가이드는 공식적인 가이드일 뿐, 실제 디자인은 32dp를 많이 사용하는 트렌드나 맥락이 존재하는 것일까요?)
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">우선 1X 환경을 기준으로 24dp 의 기준으로 아이콘은 디자인된다고 보면 되며, 48dp는 터치영역을 포함하여 계산한 결과입니다. 측정하신 영역은 padding 영역까지 포함해서 32dp를 의미하는 것으로 보여집니다 48dp는 기준이지만 이를 꼭 지켜야하는 것은 아닙니다. 다만 너무 작은 영역을 터치 영역으로 만들면 사용자가 불편하겠죠. Material Design은 오랜 연구를 기반으로한 디자인 시스템이자 가이드일 뿐 실무에서는 이 가이드를 기반으로 앱의 특성에 맞게 적절하게 변화를 주는 것은 큰 무리는 없습니다.&nbsp;
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">따라서 아이콘의 탭 영역은 24dp보다는 무조건 커야 하며, 48dp라는 적절한 기준에 맞추는게 좋지만 iOS에서는 44pt를 기준으로 하는 만큼 32dp정도는 큰 무리없다고 보셔도 됩니다.&nbsp;
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">인스타그램의 아이콘과 텍스트는 매우 작게 구성되어있습니다. 앱의 특성이 텍스트에 있지 않고 사진이 중심이기 때문이라고 보셔도 좋습니다. 또한 인터렉션을 기준으로 피드에서의 아이콘 역할이 큰 비중을 차지하지 않는 만큼 크기는 적절한 크기를 유지해도 되는 앱이기 때문입니다.&nbsp;
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">실무에서는 앱의 특성에 맞게 유동적으로 디자인해도 무방합니다 정답이 없어요 ㅜㅠ&nbsp;
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">2. 만약 실무에선 구글 머터리얼 가이드와 다른 기준이 있다면 어떤 기준이 있을지 궁금합니다.
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">Apple HIG(Human interface guidelines)를 참고해보시면 도움 되실겁니다. 다만 너무 많은 기준을 참고하기 보다는 Material을 기반으로 하시길 추천드립니다.&nbsp;
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">3. 아이콘의 터치 영역이 넓으면, 그리드에 맞춰도 정렬되어 보이지 않는 문제가 있는데요. 이럴경우 어떻게 처리하실까요?
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">(실제 아이콘이 그려진 라이브 영역을 그리드에 맞추는 게 일반적인가요? )
<p style="box-sizing: inherit; margin: 0px 0px 1em; padding: 0px; line-height: 1.6; font-size: 16px; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; background-color: #ffffff;">보통은 아이콘의 터치 영역은 무시하고 아이콘 자체의 그리드를 맞추는게 일반적입니다. 터치영역을 고려하지 않고 아이콘을 배치하면서 그리드를 넘어가는건 무시하셔도 됩니다 :)&nbsp;

선생님, 아이콘 관련 질문이 있습니다.

소수점 단위를 사용하지 말라고 말씀드린것은 정확한 거리 계산을 할 수 있도록 하는 경우도 있고, half Pixel이 생기면 해상도를 높이는 과정에서 이미지가 심하게 깨져보이는 현상이 있기 때문입니다. 캡쳐본을 줄여서 아트보드에 넣어보면 생각하지 못한 소수점 단위의 내용을 볼 수 있습니다. 실제로는 0.25와 같은 소수점 단위를 사용하는 경우도 있지만 특별한 경우를 제외하곤 자주 사용하지 않습니다. 또한 개발도 원활하지 않고요. 현재 4X 디바이스를 사용하고 있는 사용자를 위해서 0.25를 사용했다는것은 3X디바이스 사용자는 애초에 고려하지 않았거나 1.5X는 무시했다는 이야기 밖에는 안되니까요 :)&nbsp;

앱을 캡쳐해서 분석하는데 질문이 있어요.

안녕하세요 japghost@gmail.com로 화면을 보내주시면 확인해볼게요. 제플린으로 모든 아트보드는 한번에 이동이 가능합니다 :)&nbsp;

스케치 재플린으로 옮길때

안녕하세요 질문 주셔서 감사합니다.&nbsp;<a href="https://xd2sketch.com/" target="_blank" rel="noopener noreferrer">https://xd2sketch.com/</a>
위 사이트에서 파일 변환이 가능합니다만 완벽하지는 않아요 ㅠㅠ&nbsp;

agilelabs

Posts