728x90 반응형 SMALL 기획26 오토레이아웃 사용하여 표 제작 기획서를 작성할 때 저는 도표를 종종 활용합니다.피그마의 '플러그인'에서 표를 만들 수도 있지만, 양이 많지 않은 경우에는 직접 만드는 게 더 빠르다고 생각해요.더 효율적인 방법이 있을 수도 있지만, 제가 사용하는 방법을 공유드리고자 합니다.'오토레이아웃'을 활용하여 아래 표를 똑같이 만들어 보세요.추가 요청사항: 아래 표에서 자유롭게 열, 행 추가 가능해야 함표 만드는 방법 아래에 설명 드릴게요.눈으로 보는 것보다 피그마에서 직접 그려보는 것이 실력 향상에 더 효과적입니다. 텍스트 작성(단축키: T)작성한 텍스트에 오토레이아웃 추가(단축키: Shift + A)이때, 프레임이 씌워지며, 파란 테두리가 표시됩니다.(하단 이미지 참고) 프레임 클릭 후, 우측패널 'Auto layout' 내 'Horizont.. 2024. 10. 29. 아트보드(artboard) 1. 정의 각 화면을 보드에 나열하는 것 서비스에 포함된 화면들을 펼쳐놓은 형태를 말함 여러 가지 상황의 화면(e.g. 로그인한 계정이 회원가입되어 있을 경우, 회원가입이 되어 있지 않을 경우)을 타일처럼 나열하여 보여주는 형식 2. 사용 목적 실제 운영중인 서비스는 다양한 화면을 보유하고 있으며 조건에 따라 보여주는 결과 화면이 상이한 경우가 대부분 아트보드가 존재하면 케이스마다 디바이스로 테스트를 진행하지 않아도 신속하게 출력될 화면을 확인할 수 있음 매번 기획 시마다 기획 범위 내의 운영 서비스를 확인하기 위해 테스트 하는 시간을 줄일 수 있음(e.g. 다양한 케이스를 개별로 확인, 특수한 케이스 확인) 디자인팀에서 작업한 파일을 참고해도 되지만 디자인 작업물과 실제 운영 서비스가 상이할 수 있으며.. 2023. 8. 14. 예외처리(Exception Handling) 1. 정의 정상적으로 진행되어야 하는 프로세스에서 유저가 다른 행동을 취하는 경우를 대응하는 것 2. 예시 유저가 로그인을 시도할 때 정상 프로세스: 유저가 회원가입된 ID, PW를 정확하게 입력해야 함 [예시] (1) 유저가 ID 및 PW를 정확하게 입력하였을 경우 → 로그인 성공 (2) 유저가 ID 또는 PW를 정확하지 않게 입력하였을 경우 → 로그인 실패 로그인 성공, 실패에 대해 유저에게 어떻게 안내해줄 지 정의하여 화면설계서 작성(하단 이미지 참고) 로그인 성공 토스트 메시지로 로그인 성공 안내 로그인 실패 로그인 실패 에러 메시지 출력 2023. 7. 31. 드롭다운 메뉴(Dropdown menu), 셀렉트박스(Select box) 1. 셀렉트 박스, 드롭다운 메뉴 셀렉트ㅏ 박스와 드롭다운 메뉴는 같은 의미 메뉴 제목이 표시된 곳을 선택하면 메뉴 리스트가 아래로 펼쳐지며, 하단 항목을 클릭하면 그 항목이 선택되어 실행되는 가장 일반적인 메뉴 2. 드롭다운 리스트 드롭다운 메뉴(=셀렉트 박스) 내 화살표를 누르면 출력되는 리스트를 지칭 화살표를 누르면 숨어있던 항목들이 아래로 펼쳐져서 원하는 항목 선택 가능 다수의 선택할 수 있는 항목이 존재하고 유저가 1개의 값을 선택해야 하는 목적으로 많이 쓰임 3. 화면설계서 사용 예시 드롭다운 메뉴(=셀렉트 박스) 구성 title 취미 선택필드 Placeholder: 취미를 선택해주세요. 삼각형 아이콘:선택 시 드롭다운 리스트 출력 드롭다운 리스트 리스트 항목: 클라이밍, 크로스핏, 스쿼시, .. 2023. 7. 28. 이전 1 2 3 4 ··· 7 다음 728x90 반응형 LIST
