Extra Form
PHP PHP 7.3
CMS Rhymix 2.x

게시판 목록을 내리다가 끝에 도달했을때 목록을 더 보고 싶을때 가장 좋은 방법은 뭐라고 생각하시나요?

 

XE/라이믹스 게시판에서 가장 많이 사용하는 방식은 페이징 방식이겠죠. 예를 들어,

 

목록 1.PNG

 

이런 식으로 말이죠.. 요즘 SNS나 앱에서는 거의 사용하지 않는 방식입니다. 특히 모바일에서는 저도 저렇게 작은 버튼 나오면 더 이상 보고 싶지 않습니다. 페이지 버튼을 다 빼고 '이전 / 다음' 제어하는 방식도 있지만..진짜 찾고 싶은 자료가 있으면 보통 검색 기능을 이용하지 전페이지, 다음페이지 눌러가면서 찾지는 않죠.

 

그래서 아작스 무한 로딩을 적용해서 개발해봤는데 이것도 큰 단점이 있습니다.

 

1

게시판 목록 하단에 다른 애드온 등을 배치할 수 없습니다. 계속 불러와서 추가하니까요.

이건 해결책이 있는 것 같습니다.  '더보기' 버튼을 달아서 한번은 추가로 불러오되, 그 이후로는 스크롤에 따라 무한 로딩.

 

2

그래도 아쉬운 점은 존재합니다. 목록에서 본글로 진입한 다음에  댓글 하단에 '추가 목록'을 출력하기가 애매해지더군요. 읽은 글을 기준으로 아래방향으로 계속 추가하는 것은 문제가 없겠지만.. 읽은 글 이전의 목록들로 돌아갈 방법이 없습니다. 뒤로가기 밖에는요. 네이버는 어떻게 하더라.. 하면서 보니까 게시판 목록대신 베스트글 위젯? 같은 걸로 해놨습니다. 그 밖에 많은 앱들은 뒤로 가기를 통해서 목록으로 돌아가는데.. 이게 댓글이 많이 달리는 게시판은 좋은 선택이지만, 그렇지 않은 경우 글 하나 읽고 뒤로 가기를 반복해야 해야 해서 차라리 페이징 방식이 낫겠더군요.

 

여러분이 생각하시기에 또는 경험해본 것 중에 가장 좋은 방식은 무엇인가요?

  • profile
    스크롤시 내용이 추가되는 방식은 무한스크롤 방식이라 부르는데요, 최근 콘텐츠만 중요한 사이트(SNS 등)에서는 좋은 방식이지만 타운같이 가끔은 몇십 페이지 전의 자료도 열람해야 하는 사이트의 경우 무한스크롤 방식은 매우 불편합니다.

    페이지를 넘기기 위해 스크롤을 많이 해야 하는건 물론이고 페이지를 넘기다 보면 점점 속도가 느려지다가 메모리 부족으로 탭이 종료되는 일도 빈번히 발생합니다.

    즉 사이트 특성에 따라 맞는 방식을 선택하는것이지 어느 방식이 좋고 나쁜게 아니라고 생각합니다.
  • profile profile
    '최근 콘텐츠만 중요한 사이트' 이 표현이 적확한 것 같습니다. 후기 같은 게시물도 오래된 후기보다는 최신 후기를 읽고 싶어하니까 과장 좀 보태서 수개월 이전 자료까지 거슬러 갈일이 없을때 좋은 방식인 것 같아요.
    자료실 개념의 게시판에서는 페이징 방식이 낫겠군요.
  • profile ?

    흐음.. 지나가다 댓글씁니다.
    Infinite Scroll 은 구현하기 나름입니다.
    xetown 과 같은 php + html + javascript 형식에서는 구현이 힘들수있지만, [불가능하진않음]
    node or golang [REST API] + react [redux toolkit] + [virtual dom] 을 활용하면 메모리 부족현상이 없으며 이전 스크롤위치 또한 기억할수있죠!

    즉 성능상 이슈가아닌 ui, ux 관점에서 봐야한다고 봅니다.

  • profile
    선진의 기준을 정할수 없는 것이 바로 이런 ui, ux 과 관련된 부분이라고 생각합니다. 아무리 편리한 사용이라고 개발을 해서 제공해도 각 사이트에 따라서는 최악이 될 수 있습니다.

    타운과 같은 정보를 db에서 찾아서 열람하듯이 오래된 문서를 보는 곳은 현재의 방식에서 다른 방식으로 변경하면 오히려 더 불편해 지는 경우가 많습니다.

    그리고 무한 스크롤이 가능한 곳들은 최근에 작성된 글 중 내가 시간이 허락되는 동안 스클롤해가면서 읽어도 되는 그런 컨텐츠 위주에서 가능한데 여기에는 게시글로 접근할때 어디에서 진입했는지 체크할 수 있는 장치를 만들지 않고 제공하면 완전 최악이 됩니다. 무한 스크롤 초기에 이런 경우가 흔했죠. 요즘은 무한스크롤 방식으로 구현하면 최소한 뒤로가기 하면 마지막 지점을 찾아갑니다.
  • profile profile
    맞아요. 글에서 목록으로 돌아갔을때 엉뚱한 위치나 심지어 처음부터 로딩되면 황당하죠. 목록으로 돌아갔을때 양방향 무한 로딩이되야 가능하더라구요.

    자료실 같은 게시판이 아니라 YJSoft님 말씀하신 것처럼 최신글이 중요한 사이트고 무한스크롤을 지원하는 방식이라고 가정하면, 본글에서 뒤로 가기로 목록으로 돌아가는 것 말고 자연스럽게 목록을 계속 볼 수 있는 좋은 방식이 있을까요?
  • profile profile

    글쎄요. 개인적으로는 글 읽기로 진입했을때 하단에 소속된 페이지의 글목록이 나오고  페이지 목록이 나열되고 현재 페이지를 가리키고 있다면 충분하다고 생각합니다. 많은 페이지 목록을 단순화 하고 싶다면 이전,다음 으로 제공하면 그만이구요.

    말씀하신 목적에 제가 말씀드린 부분이 불편하다고 느끼시는 것이 무엇인지 개인적으로는 잘 이해를 못하고 있습니다.

    https://rxtip.kr/talk

    이 스킨이 가로 간격이 넒은 PC에서는 흔히 보여주는 페이지 목록을 보여주고 모바일에서는 이전,다음 으로 제공합니다.

    (게시글 열람할때 하단에 목록 자체를 제공하지 않는 스킨인데 제가  목록은 항상 보이도록 수정은 했습니다.)

     

    만약 추가를 해야한다면 스케치북에서 제공하는 페이지를 입력해서 원하는 페이지로 이동할 수 있도록 하는 정도...

  • profile profile
    모바일에서는 이전 / 다음 방식 괜찮네요.
    페이지목록이나 이전/다음 방식이 뭐가 불편하냐하면 딱히 불편하진 않은데.. 어떻게 하면 아주 조금이라도 더 나을까 하는 고민이겠죠..
    (Snax님 레이아웃 참 괜찮네요.)
  • profile profile
    네. 제작자분 스킨이 좋죠. 그런데 딱 하나 발견된 제가 생각하기에 안좋은 것은
    https://rxtip.kr/rx_tip/14822

    특정페이지의 글을 읽다가 무심코 목록으로 가기를 눌렀을때 페이지를 초기화해서 처음으로 가버리는 것입니다. 어떤 의도였는지 좀 의문인 부분입니다.
  • ?

    요즘 무한 스크롤은 옛날 같지가 않아서 과거 있었던 단점을 전부 코딩으로 극복해내고 있지요.
    다만 극복하기 위한 난이도가 만만치는 않기 때문에 개인 사이트에서는 흉내내기 어렵습니다.

    1) 스크롤할 수록 느려지고 메모리 많이 먹어서 죽는 문제
    DOM을 조작해서 현재 화면에 표시되는 부분 이외에는 그냥 비어있는 공간으로 만듭니다. 아니면 이미지와 비디오만 없애줘도 상당히 효과가 좋지요. 스크롤하면 스크롤에 따라서 내용을 보여주고요. 아무리 스크롤을 많이 해도 쉽게 느려지지 않습니다. 비디오와 이미지만 없애주는 정도라면 사실 상당히 쉽게 구현할 수 있습니다.

    2) 뒤로가기가 불편한 문제
    음... 이걸 해결하는 방법으로 제가 본건 몇가지 방법이 있습니다.
    첫째 페이스북 또는 레딧스타일
    이건 무한스크롤 상태에서 그냥 본문까지 다 보는겁니다. 본문을 보기 위한 화면이동 자체를 안하는겁니다. 레딧은 원래 본문 길이가 짧고, 페북은 본문 더보기 버튼을 누르면 화면이동을 하는게 아니라 무한스크롤 상태에서 그냥 숨겨졌던 나머지 본문까지 로딩해서 보여주죠. 댓글 버튼을 누르면 댓글도 로딩해서 무한스크롤을 유지한채로 덧붙여서 보여주고요.... 다만 이 방법은 뭔가를 누르면 누를수록 스크롤이 점점 더 길어진다는 문제가 있겠지요.
    둘째 트위터 스타일
    트위터는 본문 전체를 보기 위해서 클릭해서 화면이동해서 들어가긴 해야 합니다.
    그러나 뒤로 가기를 하면 아주 깔끔하게 이전으로 빠르게 돌아갑니다. 스트레스가 전혀 없죠.
    이게 가능한 이유는 트위터가 SPA이기 때문입니다. 위에 주소창 주소도 바뀌고 마치 화면이동을 하는 것처럼 보이지만 사실 SPA 내에서의 스테이트 이동이죠. 그래서 이전 상태를 완벽하게 기억할 수 있는거고 이동속도도 빠른 겁니다.
    셋째 파일노리 스타일

    이걸 제가 옛날에 파일노리 모바일 사이트에서 첨 봐서... 파일노리같은 사이트는 구닥다리 스타일 인터페이스만 유지할 줄 알았는데 이렇게 참신한 방식으로 무한스크롤을 도입하다니 참 인상깊었었죠.

    무한스크롤도 아랫방향으로 무한히 늘어나는게 아니라 1페이지씩 게시글 목록을 로딩하는 한국식 스타일을 유지해서 옆으로 무한하게 늘어납니다..... 되게 특이했었어요. 
    게시글을 클릭하면 무한스크롤 위에 본문을 별도의 팝업으로 띄워서 보여줍니다.
    그리고 뒤로가기가 아니라 목록으로 돌아갈때는 팝업을 닫는거죠.
    아마 파일노리 스타일이 가장 구현하기 쉬울겁니다. 트위터는 SPA로 구성해야 하니까 기존 사이트에서 스킨만 바꿔서 시도할 수 있는 레벨이 아닙니다. 하지만 클릭하면 게시글 본문을 팝업으로 보여준다... 뭐 이정도라면 라이믹스 스킨으로도 충분히 구현가능한 레벨입니다.

    그리고 페이스북 스타일은 솔직히 게시물을 휘발성으로 취급하는 느낌이 있구요. 10개의 게시물이 있으면 본문 확인은 그중에 한개쯤 한다 뭐 이런 전제가 있어야 페이스북 방식이 쓸만할겁니다. 10개의 게시물을 빠짐없이 다 열어본다 이런 식이면 굉장히 비효율적이라고 봅니다.

  • ? profile
    레딧은 그 자리에서 본문이 열린다기 보다 페이지 이동이 아닌 위에 모달창이 하나 뜨는 그런 느낌이더라구요. 진짜 그 자리에서 본문을 펼쳐서 보여주는건 쿼라(Quora)라는 사이트가 그런 방식이어서 인상적이었는데 라이믹스에서도 가능할까 왠지 굉장히 무겁거나.. 또 말씀하신 것처럼 본문이 긴 경우에는 깔끔하지 않을 것 같다는 생각이 들더군요.. 저는 SPA나 DOM이 무엇인지 이해하지 못하지만 알려주셔서 감사합니다. 파일노리에 흥미가 생겨서 찾아들어가보았는데 filenori.com 여기 맞을까요? 들어가봤지만 말씀해주신 것과 비슷한 것은 못찾았어요..
  • profile

    고전적으로 페이지 번호 나열하는 방법이 가장 좋죠. 세련된 맛? 원하는 내용 찾기도 쉽고, 기억해둔 페이지에 가서 참조할수도 있구요. 무한스크롤 사이트는 그냥 패스합니다. 

  • profile profile
    와.. 그렇군요. 저는 대부분의 사이트/앱에서 특정 정보를 찾기보다는 엄지로 슬슬 스크롤 내리면서 서핑하는 경험이 주가 되서 페이지 번호 나오는데 까지 내려가면 다음 페이지를 보는게 아니라 그냥 나가버리는 경우가 많거든요. (다봤네~ 하면서) 흠 개발자분들이 많은 사이트라 그런가 페이징 방식을 더 선호하시는 분들이 많네요 ㄷㄷ
  • profile profile
    목적없이 '구경'하는 경우에는 무한 스크롤도 좋겠죠. 본인이 뭘 원하는지조차 모르는 상태면, 줄줄이 내리다보면 원하는 것을 찾게될수도 있으니까요. 하지만, 목적이 분명한 경우에 무한스크롤하면 ㅎㅎ.... "지금 장난하자는 거냐?" 이런 느낌이더군요.
  • profile
    핵심은 웹지기님이 다 적어주신 듯 하네요.
    목록을 어떻게 더 보여주냐는 사이트 바이 사이트입니다.
    또한 조합하기 나름이구요.

    한국형의 최신 글이 최상단 vs 영어권의 최근의 무엇인가(덧글이든 뭐든)가 발생하면 최상단
    본문을 따로 봐야하는 vs 목록과 본문의 경계가 없는
    휘발성의 게시물 vs 정보성의 게시물

    음 또 어떤 다른 것이 있을려나요.

    조건에 따라서 또는 목적에 따라서 페이징을 할지, 무한스크롤을 할지, 무한스크롤을 한다면 어떻게 보여줄지 등을 결정해야죠.

    이건 옳고 그름의 문제가 아니라고 보입니다.
    또한 정답이 있는 것도 아니구요.
    하지만 목적에 따라서 정답에 더 근접한 것이 있는 것이죠.
  • profile

    개인적으로 게시판 목록에서는 페이지 구분이 있는 것을 선호하지만, 글읽기 화면의 하단목록에서는 그 페이지 구분을 그대로 따라가지 않았으면 하는 바램이 있습니다. 예를 들어 2페이지 마지막 글을 클릭했는데 그 사이에 새 글이 등록되면 현재 보고 있는 글은 3페이지로 밀려날 텐데, URL에 &page=2이 붙어 있으니까 현재 글이 없는 2페이지 목록이 나오는 경우가 비일비재합니다. 그냥 현재 글 기준 위아래 n개를 보여준다면 이런 문제가 발생하지 않을 것입니다. 여기는 2페이지다!!! 라는 인위적인 페이지 구분이 없어질 테니 무한스크롤과도 좀더 잘 어울린다고 생각됩니다.

     

    게시판 목록에서도 리젠율이 미칠 듯이 높은 사이트가 아니라면 굳이 전체 페이지를 제공할 필요는 없고, 처음/이전/다음(또는 더보기) 버튼만 보여주는 것이 깔끔한 UI와 넉넉한 클릭 타겟(모바일에서 중요!!)을 제공하면서도 대부분의 사이트에서 무난한 선택이라고 생각됩니다. 특정 페이지로 직접 이동하는 기능은 링크를 나열하는 전통적인 방식을 고수하기보다는, 드롭다운 메뉴나 숫자 입력란 등 다른 방법도 충분히 연구해 볼 가치가 있습니다. 링크 나열 아니면 무한스크롤이라고 선택지를 미리 좁혀놓을 필요는 없으니까요.