재 본 프레임에서는 위치가 안 틀어졌습니다
프레임 7개를 브라우저에서 실제로 그려 원본과 맞춰 봤습니다. 위치 차이는 0픽셀이었습니다.
디자인
시안을 눌러지는 화면으로 만듭니다
시안은 그림이라 눌러도 아무 일이 없습니다. 넘기고 나면 간격이 조금씩 어긋납니다. 프레임을 그대로 가져와 도는 페이지로 만들고, 그다음 수정은 말로 합니다.
가져올 때 잰 값0픽셀 차이
- 프레임 7개 위치 차이
- 바로 쓰는 템플릿
- 템플릿으로 시작할 때 크레딧
- 글자 대비 하한
- 게시 전 보안 검사
- 휴대폰에서 밀린 화면
프레임 7개를 가져와 원본 위치와 맞춰 봤습니다. 아직 안 되는 범위는 아래에 적었습니다.
이런 상황
넘기고 나면 디자인이 조금씩 달라집니다.
간격을 하나하나 맞춰 놨는데 나온 화면은 비슷하기만 합니다. 그때부터는 고칠 때마다 말이 오갑니다. 그래서 많은 디자이너가 직접 고치려고 코드를 배웁니다. 4픽셀 하나 때문에 가기엔 먼 길입니다. 여기서는 프레임이 위치를 지킨 채 넘어오고, 그다음 수정은 문장 한 줄로 합니다.
이렇게 합니다
가져오거나, 완성된 데서 시작합니다.
들어오는 길이 두 개입니다. 둘 다 링크를 보낼 수 있는 화면에서 끝납니다.
- 프레임을 가져옵니다
위치와 크기, 오토레이아웃, 글자, 색과 그라디언트, 이미지, 그림자가 납작한 그림이 아니라 실제 위치로 넘어옵니다.
- 아니면 포트폴리오에서 시작합니다
완성된 템플릿이 336개 있습니다. 전부 데모가 열려 있고, 가져오는 데 크레딧이 들지 않습니다.
- 말로 고칩니다
"제목 아래 간격 좁혀 줘." 이런 수정에는 크레딧이 들지 않아서 세 가지 안을 다 만들어 봐도 부담이 없습니다.
여기서 시작하세요
작업을 보여 주는 3개.
전부 데모가 열려 있습니다. 템플릿으로 시작하면 크레딧이 들지 않습니다.
- 디자인 포트폴리오
결과 이미지만이 아니라 왜 그렇게 했는지 쓸 자리가 있습니다.
- UX/UI 디자이너
문제, 탐색, 결과 순서로 읽힙니다. 채용하는 쪽이 보고 싶어 하는 흐름입니다.
- 사진 갤러리
이미지가 앞서고 레이아웃은 물러납니다. 채워 넣기도 제일 빠릅니다.
336개 전부 데모가 열려 있습니다. 가져오기 전에 눌러 보세요.
솔직하게
잰 것과, 아직 못 잰 것.
가져오기는 잘 되는 부분과 아직 안 되는 부분이 갈립니다. 둘 다 적습니다.
글자 대비를 4.5:1 로 지킵니다
템플릿 전부가 이 기준을 넘겨야 올라갑니다. 새로 만든 화면에도 같은 검사가 돕니다. 흰 바탕에 옅은 회색 글씨는 통과하지 못합니다.
컴포넌트 인스턴스는 아직입니다
인스턴스, 벡터 도형, 제약(constraints)은 다음 단계입니다. 이런 걸 많이 쓴 프레임은 단순해진 채로 넘어옵니다.
당신 파일로는 안 재 봤습니다
저희가 확인한 건 프레임 7개입니다. 레이어가 수백 개인 실무 파일에 대해서는 드릴 숫자가 없습니다.
시작
프레임 하나만 넘겨 보세요.
화면 한 장으로 먼저 해 보고, 얼마나 비슷하게 나오는지 눈으로 확인하면 됩니다.