NamS의 iOS일기

Variants가 뭐나면.. 하단탭으로 예를 들자면 이런 탭아이콘을 만드려면 아이콘 2개를 가져와서 각각 컴포넌트에 넣어줘서 만들어야하지만 Variants를 사용하면 하나의 컴포넌트로 해결 할 수 있어요 속성을 컨트롤해서 구분할 수 있어요 네이밍이 중요하구요 왜 중요한지는 아래에 보면있어요 컴포넌트의 속성(on/off)를 줘서 변경 할 수 있어요 먼저 컴포넌트의 개념을 알고가야 할 것 같아요 2번째에있는 4조각난 다이아몬드표시를 누르면 지정이 되구요 보라색이뜨면서 저 모양이 뜰거에요(조각난 다이아몬드) 이렇게말이죠 그 다음 복사를 해보세요 (맥북)옵션키를 누르고 드래그 혹은 커맨드+C ~ V 커맨드+D 등 알고있는 복사 단축키구요 ㅎㅎ 보면 새로 복사한 컴포넌트는 텅빈 다이아몬드가 그려져있죠?? 이게 자..

이번주제는 간단한 주제에요 앱에서 버튼을 누르면 다음화면으로 가는 그러한 동작을 시뮬레이션 할 수 있는 기능이에요 아트보드가 우선 2개이상이 필요하겠죠?? 이동시킬 화면과 이동화면! 오토레이아웃을 누르면 오른쪽화면으로 이동되도록 해볼게요 왼쪽화면의 오토레이아웃을 클릭하고 디자인창이아니라 프로토타입창 을 클릭을 하면 사각형에 ㅇ 하나가 나타날거에요 드래그해서 이렇게 끌어다 놓으면 해당 컴포넌트를 어떻게 할때 동작하고 어떤 인터렉션이 동작할건지 설정할 수 있어요 설정했다면 오른쪽위에서 플레이 버튼을 눌러서 확인하고 여러 화면이 있다면 시작 지점을 설정할 수 있어요 오른쪽 프로토타입창에서 혹은 아트보드에서 왼쪽위에 재생표시를 드래그해서 지정할 수 있어요

디자인을 할때 중요한것중에 정렬이 빠질순없죠 (제맘대로 중요하다고..생각...햇어요) iOS개발자한테는 너무 익숙한 Auto Layout!! 맞아요 그개념이에요 제약사항을 걸어두면 위치가 바뀌어도 제약에 맞게 움직여요 오토레이아웃을 하기전에 우선 기본 정렬을 살펴볼게요 디자인창 위 쪽에 이러한 모습 딱봐도 뭔지 알정도로 잘 만들어놨네요 ㅎㅎ 하나씩 눌러보세요 원하는위치에 붙어요 이때 기준점은 자신의 부모프레임을 기준으로 정렬됩니다! 하나의 프레임이 어떻게 움직여도 부모프레임 안에서 정렬되는거에요 탁구공을 상자에 넣고 흔들면 공은 상자안에서만 움직이듯이.. (비유가 맞는지모르겟네요 ㅎㅎ..) 이제 오토레이아웃에 대해서 볼게요 제약사항을 준수한다..! 예를 들어 한 프레임을 부모프레임과 중앙으로 정렬해놓는다..

피그마를 많이들 사용한다고하네요 디자인툴로 XD, Figma, 스케치등 다양한 툴중 하나에요 누가 어떤작업을하는지 실시간으로 보면서 소통할 수 있다는것! 이 제일 큰 장점일 것같아요 개발자들도 접속해서 같이 볼수있어요 onwer권한제한이 유료버전이고 수정권한이나 보는권한정도는 팀원과 공유하면서 사용 할 수 있어요 앱과 웹으로 둘다 사용할 수 있구요 깔지않아도 되기때문에 어디에서나 사용할 수 있는 접근성이 좋은것같아요 프로젝트를 만들고 처음 화면을 보면 빈화면이 있고 회색화면이 작업할 공간이되구요 왼쪽에는 컴포넌트간의 관계나 에셋을 볼 수 있고 오른쪽에는 디자인을 위한 다양한 속성과 클릭시일어나는 모션, 코드로 보여주는 기능이 보여요 그림을 그릴꺼면 도화지를 깔아야해요 그렇듯 작업을 하기위해서 아트보드(?..