'입력폼 안의 텍스트'와 '페이지 넘기는 거'라고 말했던 사람들은 이 글을 보길 추천한다.
제대로 된 용어를 알고 멋있게 기획해보고 싶다면, 플레이스홀더(Placeholder)와 페이지네이션(Pagenation)에 대해 알아보자.
※ 현재 모바일 가독성은 고려하고 있지 않습니다.
※ PC 버전을 이용해주세요.
지난 번에 이어서 기획자들이, 또는 기획을 하면서 자주 쓰는 용어를 소개한다.
앞 글과 제목에서 언급하고 있지만 소개하는 기준은
자주 쓰고, 많이 보았지만 정확한 용어는 모를 것 같은 경우다.
이전에서 소개한 글은 아래 링크를 통해 볼 수 있다.
2023.05.22 - [기획하기: '서비스'/준비하기] - 기획 관련 용어 파헤치기: 이걸 뭐라고 부르지? #1편
기획 관련 용어 파헤치기: 이걸 뭐라고 부르지? #1편
회사를 옮기고 나서 제일 크게 느끼는 부분은 '용어' 차이다. 실무에서 가장 많이 사용하는 (약 한 달 간 가장 많이 접한) 용어들을 위주로 정리해보려고 한다. 나는 뼛속까지 기획자인가보다 싶
ddyoone.tistory.com
👩🏫 이전 글 요약
✔️ 딤드(dimmed) 처리
화면을 고의로 어둡게/흐릿하게/뿌옇게 처리하는 것을 말함
✔️ 모달(modal) 팝업
부모창 브라우저는 동작하지 않도록 하여 해당 팝업 창에 집중하게 하는 팝업의 한 종류
이걸 뭐라고 불러요?
1. 플레이스홀더 (Placeholder)
단어에서 유추할 수 있듯이, '자리지킴이' 정도 될 수 있겠다.
티스토리 계정 로그인 화면을 보면,
ID와 Password를 입력하는 곳에 문자가 적혀있다.
해당 문자는 실제로 입력을 시도하면 사라져서 보이지 않는다.
이런 식으로, 입력에 도움을 주기 위해서
입력창에서 가이드를 제공하는 문구를 플레이스홀더(Placeholder)라고 한다.
티스토리의 경우, 만약 플레이스홀더가 없었다면
빈 네모칸 두 개만 있어 사용자가 당황했을 수도 있다.
깔끔함을 위해 ID와 Password만 적혀있지만,
입력해야하는 필수 값이 있는 경우 안내하기도 한다.
ex. '영문 대/소문자 및 숫자를 입력해주세요.'
플레이스홀더의 단점도 다수 존재한다.
기획은 항상 생각지도 못했던 (혹은 잠재적으로만 인지했던) 요소를 맞닥뜨리곤 하는데,
아래 블로그가 플레이스홀더의 단점을 잘 설명해주어서 소개하며,
이미 한번 요약한 내용이니 직접 보는 것이 좋을 것 같다.
실제 기획 시 해당 요소들을 검토해보면 좋을 것 같다.
https://ibrahimovic.tistory.com/30
Placeholder를 사용하지 마세요.
이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다.자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많은
ibrahimovic.tistory.com
2. 페이지네이션 (Pagenation)
역시 단어 그대로 페이지 구역이라고 할 수 있다.
아직 내가 작성한 글은 페이지가 생길 정도로 많지 않기에,
위에서 소개한 블로그의 전체 글 목록을 가져와보았다. (정확히는 하단부)
내용이 많아질 경우 '무한 스크롤'의 압박이 생긴다.
이를 해결하기 위해 페이징을 해야하는데,
이러한 페이지를 표시하는 구역을 '페이지네이션(Pagenation)'이라고 한다.
디지털 기기를 이용하는 요즘 사람이라면 못봤을리 없는 이 구역.
그렇지만 생각보다 표현하는 방법은 엄청 엄청 다양하다.
몇 페이지까지 보여줄지,
화살표는 눌렀을 경우 다음으로 갈지,
넘버링을 클릭하면 해당 페이지로 갈지,
화살표를 두 개를 두고 하난 맨 끝으로 이동하게 할지,
해당 구역에 쌓일 글의 양과 사용자의 동선을 고려해서
적절한 페이지네이션을 만드는 일은 생각보다 중요하다.
이 간단하고 익숙한 것에도 기획자의 노고가 들어있다는 사실!
다양한 페이지네이션 방법을 소개한 블로그가 있어 링크를 첨부한다.
Lithium Design system
더 이상 이동이 불가한 경우 버튼을 비활성화합니다. 좌/우측에 한 페이지씩 이동(◀, ▶), 처음과 마지막 페이지로 이동( |◀◀ , ▶▶| ) 하는 버튼을 배치합니다. 단, 첫 페이지에서는 좌측 ◀, |
61.107.76.13
역시 앞으로는
'입력창에 문구 써주세요. 근데 회색으로 있는 그거 있잖아요. 입력하면 사라지는거'
'스크롤 많이 안되게 밑에 페이지 넘어가는거 그거 추가해주세요.'
보다는,
'입력창에 00문구로 플레이스홀더 기재해주세요.'
'게시글은 10개만 보여주고 페이지네이션 붙이죠.'
로 멋있게 말해봅시다!
'기획하기: '서비스' > 요리: 현재를 준비하기' 카테고리의 다른 글
| 서비스 기획의 순서, 뻔한 내용 말고 진짜 어떻게 하는데? - CRUD편 (2) | 2023.06.15 |
|---|---|
| 기획 관련 용어 파헤치기: 이걸 뭐라고 부르지? #1편 (0) | 2023.05.22 |
