[패스트 캠퍼스] UXUI 강의 6주차 : IOS 메일 앱 클론 디자인 (1)

Apple Design Resources Sketch 및 Photoshop 템플릿, 플러그인 및 사전 설정된 UI를 사용하여 애플리케이션을 신속하게 설계함 elements.developer.apple.com

Apple Design Resources Sketch 및 Photoshop 템플릿, 플러그인 및 사전 설정된 UI를 사용하여 애플리케이션을 신속하게 설계함 elements.developer.apple.com

인기글

*메일 박스 메인 메일 박스 메인에서는 특히 작은 부품 단위로 분할하고 디자인 시스템을 구축하는 방법을 배울 수 있었다.무료 버전을 쓰고 있는 나는 연동하지 못하고 수정하는 데 고생했다..(유료 버전 시급하다……………)각 Table cell에 있는 Divider라인 때문에 사이즈가 애매하게 된 것은 아닌지… 그렇긴몇번이고 수정하고 보았지만, 강의만으로 뭔가가 부족하다고 느꼈다.게다가 영상 속의 UI와 내가 쓴 Figma UI가 다른 걸 보면 업데이트한 것 같지만 그 때문에 Resizing>Fill Container부분을 모두 놓쳤다.디바이스 별로 해상도 조절 때문에 안드로이드에서는 필수적으로 작업해야 할 부분 같았지만 참 답답한..실무에서 어떻게 할지 궁금하다.

하아…디자인 시스템 연동하고 싶어… 만들면서 못쓰니까 너무 답답해..

*수신 트레이(메인/콘텍스트 메뉴/선택/편집/스크롤/검색) 다른 페이지 작업을 거듭하마다 디자인 시스템 연동에 대한 필요성이 절실하게 다가온다…!!!수정 하나가 복잡한 인터페이스를 가질수록 복수 동시에 수정할 수 있는 연계성에 놀랄 따름.(라테는..)..포토샵, 일러스트로 고치려고 지옥을 맛 보네..수정이 수정을 낳은 기하 급수적 수정 퍼레이드)작업 시작에서 상단 Navigation Bar Title에서 하단 Action Bar까지 추가로 작업해야 할 것 투성이인 덕분에 디자인 시스템 모두 수정했다..우와..(우와~)..유료 결제할지)

List의 Select 라디오 버튼을 Variant로 만들어 Active/Inactive 상태로 디자인 시스템에 추가!이후 읽은 것/읽지 않은 것 중 편집 중인 상태에서 선택의 활성화와 비활성화를 분리시켜 가이드를 잡아준다.

이런 작업을 통해 공통적으로 활용되는 컴포넌트를 만들어 놓으니 이미 메일 앱의 메인이 완성된 것 같았다. (아직 할 일은 산더미처럼…웃음)스크롤에 따른 네비게이션 바의 변경 사항을 작업해 보았다. 상/하단에 고정된 값 이외의 스크롤 영역에 대한 길이는 대지 크기를 늘려 작업해 준다. 이때 spacing mode > space between을 쓰기 위해서 각각 [(아이콘+메일함)(수신트레이)]에 해당하는 영역 크기를 동일하게 하는 것이 포인트..!이름부터 생소한 컨텍스트 메뉴…w버튼을 누르면 뜨는 셀렉트박스인 줄 알았는데 낯선 명칭이 익숙하지 않네.. 컨텍스트 메뉴의 경우 최대 생성되는 List 개수를 미리 만들어 놓고 레이어에서 눈길을 끄는 방식으로 사용하는 것이 좋다.작업하면서 알려주신 팁! 화살표 버튼으로 이동할 때 스페이스 바를 눌러 이동하면 nudge 설정값만큼 이동하게 되는데 모바일의 경우 8씩 이동하면 되므로 Figma 설정 > Preperence > Nudge Amount에서 Big nudge를 10에서 8로 변경하면 편리하다!이런 설명을 듣고 아직도 왜 8씩 이동해야 하는지 제대로 이해가 가지 않았다…웹이나 모바일 디자인을 할 때 그리드 시스템에 대해 공부해봐야겠다고 생각했다. 공부해야할것이뭐든지많아~~~ https://www.youtube.com/watch?v=Q_gcAAKfGKw検出された言語がありません。

入力言語を確認してください。사이트 성향을 먼저 파악하고 그리드 시스템을 구축하는 것이 중요하다.위 영상을 통해 그리드 시스템에 대한 내용을 좀 들어보면 그동안 저는 웹디자인을 하지 않았나.. 딜러리… 정체성 혼란이 온다…아아, 가장 높은 비율은 1920*1080이 독보적이고 가장 낮은 비율은 1280*___그렇다고 해서 반드시 1920*1080이 되어서는 안 된다!누군가는 해상도에 맞지 않는 사이즈로 사이트를 보게 되므로 반드시 다양한 사용자를 고려해야 하는 것!웹에서는 내용이 들어가폭. 즉, Container의 폭은 1200px로 가는 편이 좋다.웹은 12단으로 나누면 좋다.레이아웃을 다양하게 사양하고 단을 분할하면 반응형 작업이 더 어려울 수 있다.가터(칼럼 간 간격)은 30px가 추천.!모바일의 경우 360에 좌우 여백을 20씩 잡으면 안정적이다.모바일은 6단의 경우, 이하의 레이아웃의 형태로.패스트캠퍼스 강의를 보면서 복제만 하고 표면적으로 알고 있던 부분이 서서히 드러나기 시작한 디자이너로 일하면서 편집디자인과 웹디자인을 동시에 하다 보면 완전히 뒤죽박죽이 되어 온 것이 여기서 구멍을 뚫는구나…패스트캠퍼스 강의를 보면서 복제만 하고 표면적으로 알고 있던 부분이 서서히 드러나기 시작한 디자이너로 일하면서 편집디자인과 웹디자인을 동시에 하다 보면 완전히 뒤죽박죽이 되어 온 것이 여기서 구멍을 뚫는구나…#끝까지 열심히 챌린지