UI 클론디자인 iOS 앱, 상세화면, 스크린샷, 푸터, 반응형 버튼 만들기, Sketch 앱 사용법 기초 - 패스트캠퍼스 챌린지 19일차
Lorem Ipsum
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
*Source & generator: https://www.lipsum.com/feed/html
Lorem Ipsum - All the facts - Lipsum generator
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel commodo nulla. In tincidunt, dui a venenatis rutrum, orci ligula aliquam dui, quis fringilla metus urna a dui. Vestibulum feugiat enim dignissim, finibus urna vel, euismod mi. Nullam nibh
www.lipsum.com
오늘 배운 내용 :
- 클론디자인은 남의 디자인을 보면서 심볼 구조를 짜는 것. 심볼기능을 사용하는 이유는 내가 작업을 계속 하면서나 남이 작업을 이어서 하거나 일관성이 유지되도록 하기 위한 것.
- 클론디자인의 내용은 텍스트 복사가 어려운 경우 임의의 텍스트를 넣도록 하며, 영문의 경우 lorem ipsum generator 페이지에 있는 내용을 복사해서 넣는다. (위 링크 참조)
- 컨텐츠 바깥으로 border를 그리도록 되어 있음(box model 기반 디자인). 디자이너는 컨텐츠 안쪽으로 선을 그리는 것이 편하지만 개발쪽에서는 당연히 컨텐츠 밖으로 선을 그리게 되어 이 부분을 감안하지 않고 디자인하면 디자인과 개발된 결과물 간에 미세한 간격 차이가 계속 발생하게 됨.
- 사각형의 아래쪽만 라운드코너 만드는 방법 : 사각형을 그림 > 선택 후 엔터 > shift 키를 누른 재로 아래 두 포인트를 드래그해서 선택 > 패널에서 Radius > 값 입력 후 엔터
- 반응형 버튼 : 버튼의 가로 길이가 버튼 위에 있는 글자의 길이에 따라 달라지는 버튼
- 반응형 버튼 만드는 방법 : 일반 버튼과 동일하게 버튼을 만든다 > 글자와 버튼배경을 선택하고 심볼을 생성한다 > 심볼 편집 화면에서 버튼배경을 클릭하고 패널에서 Layout - Horizontal - Center를 클릭한다 > 텍스트를 클릭하고 패널에서 Alignment - Auto Width - Center를 클릭한다 > 다시 텍스트를 클릭하고 (아이콘이 함께 있으면 아이콘과 함께 그룹으로 묶어준다음 클릭) 패널에서 Layout - Horizontal - Center를 클릭한다 > 아이콘이 있으면 아이콘을 클릭하고 패널에서 Resizing - Fix Size에서 가로와 세로를 모두 고정시킨다.
- 디자인 작업에서 캔버스의 영역을 통해서 버튼 상하단의 여백영역을 함께 작업해 주지 않으면, 개발 쪽에서 마음대로 잡거나 여백이 제각각이 된다. 그러므로 비워 두지 말고 영역과 함께 버튼을 묶어서 심볼로 만들어 주는 것이 좋다.
오늘은 스크린샷과 푸터 그리고 반응형 버튼을 만들어 상세화면 만들기 과정을 마쳤다. 내일은 Principle Prototyping을 만들게 될 것이다.
벌써 두 번째 클론페이지를 완성해서 기쁘다. 내일은 처음 듣는 생소한 내용을 배울 예정이라, 더 큰 성취감을 맛볼 수 있기를 기대한다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.