질문/조언팁/리소스 공유

Rhymix(라이믹스) 설치 후 사이트를 꾸미기 전이나 서비스를 열기 전에 확인하면 좋을 초기 설정을 살펴 보겠습니다.

 

다크 모드 - 게시판 글쓰기 창이 왜 까매?

많은 모바일 기기는 물론 맥(Apple Mac)과 윈도우즈에서도 다크 모드를 지원하면서 라이믹스에서도 사이트를 다크모드를 쉽게 적용할 수 있도록 CSS 선택자를 이용할 수 있게 제공합니다. 사이트 방문자의 기기가 다크모드가 적용된 상태라면 웹사이트도 어두운 색상으로 꾸밀 수 있게 말이죠.

 

<body class="color_scheme_dark">

 

하지만 라이믹스의 기본 레이아웃이나 게시판 등 대부분은 다크모드를 지원하고 있지 않습니다. 유일하게 다크모드를 지원하는 에디터 뿐입니다. 이 에디터는 게시판의 글쓰기나 댓글 작성시에 사용되며 회원 가입 시 서명란 등에도 사용됩니다.

 

스크린샷 2021-04-28 오전 7.31.50.png.jpg

 

다크모드에서 본 라이믹스 게시판 글쓰기 페이지

 

사이트 레이아웃이나 게시판 스킨 등에서는 흰색 배경으로 나오지만 에디터에서만 다크모드가 적용된 상태로 사이트 이용자에게 보여질 수 있고, 글을 작성할 때 글자의 색상을 지정하여 글을 작성하면 정작 흰색 배경으로 바뀔 수 있는 것이죠. 글자 색상을 변경하지 않더라도 에디터만 검게 보이니 매우 어색합니다.

 

사이트 운영자가 다크모드를 사용중이 아니라면 발견하기 어려운 문제입니다.

 

에디터에만 적용된 다크모드를 해제하려면 관리페이지에서 "고급 > 설치된 모듈 > 위지윅 에디터" 페이지에서 "다크모드 자동 감지" 옵션을 '아니오'로 변경하면 됩니다.

 

문단 간격 - 왜 줄이 다닥다닥 붙어 나오지?

아주 오래 전 XE에서 <P> 태그의 margin 스타일을 제거한 일이 있었습니다.
가벼운 글이나 짧은 문장으로 나누어 글을 작성하면 줄 간격이 심하게 벌어져 보이는 문제를 해결하려는 것이었죠.

 

<P> 태그에는 브라우저에서 기본으로 글자의 크기와 어울리는 정도의 상하 여백을 가지고 있습니다(브라우저마다 다를 수 있으나 margin: 1em 0;). 이 여백 때문에 짧은 문장 위주의 댓글에서는 간격이 심하게 벌어져 보일 수 있고, 이를 해결하기 위해 <P> 태그의 여백을 없애버렸던 것인데...

 

이 해결 방법은 정말 잘못 되었습니다.
<P> 태그에 여백을 없앨 것이 아니라 CKEditor에서 지원하는 개행 시 <P> 태그 대신 <br>로 변경하는 옵션을 적용했었어야 했습니다.

다른 곳에서 글을 복사해 붙여넣을 때는 줄이 다닥다닥 붙어 보일 수 있고, 반대로 사이트의 컨텐츠를 다른 곳에 붙여 넣으면 모든 개행에 간격이 벌어져 보이는 문제가 발생할 수 있죠.
(이 글도 아래 출처 링크에서 작성한 후 복사해왔는데 원본과 비교하며 개행을 하나하나 넣어줘야 했습니다.)

 

jjv1Nd.jpg

 

사이트 운영자가 사이트의 컨텐츠가 다른 곳으로 복제 될(글을 퍼가는...) 상황을 고려할 필요는 없지만 나중에 다른 CMS로 변경을 하거나 다른 CMS로 운영 중인 자신의 컨텐츠를 가져와야 할 때는 컨텐츠를 전부 수정(개행 추가)해야하는 일이 발생할 수 있습니다.

 

게시판 뿐만 아니라 회원 설정의 약관 입력란, 개인 회원 정보의 서명 등 에디터를 사용하는 확장 기능 등에 모두 영향을 줍니다.

 

라이믹스에서도 기본 설정은 <P>태그의 margin이 모두 제거된 상태이며, 사이트 컨텐츠의 통합이나 현재 사이트의 컨텐츠가 오랫동안 살아 남길 원한다면 이 상태를 벗어나는 게 좋다고 생각합니다. 짧은 글 위주로 컨텐츠의 생명이 짧은 성격의 사이트는 여백이 제거된 기본 상태로 두어도 나쁘진 않습니다.

 

이 설정은 위 다크모드 설정 변경과 같은 페이지에 '문단 간격'에서 설정할 수 있으며, '1em'으로 변경해두길 권장합니다.
다만, 이미 많은 컨텐츠가 작성된 상태라면 이 설정을 변경하면 기존 컨텐츠에도 영향을 주므로 옵션 변경 후 게시물을 둘러보고 변경 여부를 최종 선택해야 합니다. 또한, 위지윅 에디터에서 <P> 태그 대신 <br> 태그로 입력 되도록 쉽게 설정을 변경할 수 없으므로 기호에 따라 선택하시길 바랍니다.

 

파일 업로드 용량

게시판의 글쓰기나 댓글 등에서 회원이 파일을 첨부하는 기능에서 회원이 업로드할 수 있는 파일의 크기는 2MB(메가바이트)입니다.

휴대폰에서 촬영한 사진이 10MB를 넘기도 하므로 적절하게 업로드 허용량을 높여줘야 할 수 있습니다.

 

관리페이지에서 "콘텐츠 > 파일" 메뉴에서 "파일 업로드 설정" 탭을 선택하여 '파일 용량 제한' 옵션을 변경할 수 있습니다. 이 값은 서버에서 허용하는 크기 이하로 지정할 수 있으며, 서버에서 허용하는 크기 이상으로 변경하려면 서버 설정을 변경해야 할 수 있습니다.

 

이메일 설정

회원 가입 시 이메일 인증 기능을 이용하거나 게시판 글 작성 시 이메일로 알리는 기능 등을 이용하려면 이메일 발송 설정을 해야합니다.

 

기본 설정이 발신자 이름이 'webmaster'로만 되어있기 때문에 사이트 이름 등으로 변경하고, 발신자 주소 또한 고객응대용 이메일 주소 등으로 회신 받을 수 있는 주소로 변경해두는 것이 좋습니다. 또한, '발송 방법'을 변경하여 메일을 발송하는 서버 또는 방법을 지정하는 것이 좋습니다(이하 설명 생략). 회원 인증 메일이 스팸으로 분류되어 사이트에 회원 가입이 불가능해지면 곤란하겠죠.

 

관리페이지에서 "설정 > 시스템 설정" 메뉴에서 '알림 설정' 탭에서 변경할 수 있습니다.

 

출처: https://velog.io/@rxpublic/살펴봐야-할-라이믹스-초기-설정

  • profile

    <p> 태그의 여백은 옳고 그름의 문제가 아니라 문화의 차이라고 생각합니다. 문단과 줄을 엄격하게 구분하는 것은 1차원의 선 위에 글자를 배치하는 서양 문화권의 관례입니다. 선이 어디서 끊기는지 알아야 하죠. 반면, 한국을 포함한 한자 문화권에서는 바둑판과 같은 2차원의 격자 위에 글자를 배치하는 것이 관례입니다. 이런 문자 체계에서는 단순 줄바꿈이 아닌 문단 바꿈이라 해도 여백을 강제로 더 주지 않는 것이 더 자연스럽습니다. 어릴 때 배운 원고지 쓰는 법이나 현존하는 한국의 인쇄, 출판물들을 봐도 문단 간격을 줄 간격보다 넓게 띄우는 경우는 드뭅니다. 굳이 띄워야 하는 상황이라면 한 줄을 비우라고 배웠습니다.

     

    <p> 태그에 반드시 여백을 줘야 한다고 주장하는 것은 서양 문화가 전부인 줄 아는 실리콘밸리 개발자들의 고집 + 그게 옳은 줄 아는 사대주의 + 모든 태그를 완벽하게 용도에 맞게 써야 한다는 이상주의의 콜라보라고 생각됩니다. 개발자라면 태그를 용도에 맞게 쓰는 것이 좋겠으나, 불특정 다수에게서 글을 입력받는 위지윅 에디터라면 사용자가 의도한 대로 표시되는 것이 더 중요하지요. 엔터를 한 번 쳤는데 두 줄이 비거나, 어정쩡하게 1em이 비는 것은 대다수의 한국 사용자가 의도하는 것이 아닙니다.

     

    그렇다고 <p> 태그 대신 <br>만 사용해서 글을 쓴다면 서양 문화권의 이상주의자들은 그것 역시 옳지 않다고 주장할 것입니다. 시(詩)도 아닌데 문단 중간에 왜 줄을 바꾸냐고 하겠지요. 뭘 해도 만족시킬 수 없는 유난스러운 부류이니 무시하는 것이 상책입니다. 아마 XE에서도 CKEditor를 도입할 때 <br>은 옳지 않다는 입장에 알게 모르게 영향을 받았기에 <p>를 그대로 유지했을 것으로 생각됩니다. 단락에디터도 아니고 솔직히 다 의미 없는데 말이죠...

  • profile ?
    네. 정답은 없겠습니다.
  • profile

    에디터 다크모드와 운영자 이메일 부분은 라이믹스에서 설치시 기본값을 조정할 여지가 있어 보입니다. 사이트 이름도 그냥 텅 빈 채로 저장되거든요. install 모듈에서 해주는 게 의외로 별로 없습니다. ㅠ

  • profile

    컴퓨터 이전 세대와 신생인류 세대의 문법에 차이가 생겨버렸다고 봐야할것 같습니다. 과거에는 문단 첫 단어를 쓸때 한글자(영어는 한단어)를 들여 써야 했지만, 요즘 컴퓨터상에서 이렇게 들여쓰는 경우를 못봤습니다.

        문단과 문단 사이도 과거에는 줄바꿈이 고작였지만(영어든 한글이든 소설책 보면 이렇게 되어 있죠), 컴퓨터 문서는 한글이든 영어든 이제는 한줄띄기가 불문율되어 버렸구요.

     

        사투리나 틀린 맞춤법도 많은 사람들이 쓰다보면 표준어가 되듯이, 글쓰기 포맷도 많은 사람들이 쓰는 것이 표준이 되는 것 같습니다.

        제 개인적으로는 <p>에 마진이 있으면 편집에 혼란이 오더군요. <p>든 <br>이든 엔터키를 누르면 무조건 한줄이 띄어져야 편해집니다. 물론 한줄이 아닌 1em으로 띄어지면 가독성이 더 좋아지기는 하는데, 편집이 쉬운쪽을 선호하게 되네요.

     

    (위에 한글자씩 들여 써보니까, 좀 보기 불편하네요 ㅠㅠ)

     

    PS: 아, 다크모드 에디터가 튀어나오는 것은 저것 때문였군요. ㅎ... 불편했습니다. 
     

  • profile profile

    line-height로 줄간격을 자유롭게 조정할 수 있게 되기 전에는 한 줄씩 띄지 않으면 글자가 너무 빽빽하게 들어차서 가독성이 좋지 않았습니다. 우리나라 인터넷 문화 중 그 시절에 굳어진 것이 상당히 많지요.

    HTML에서는 들여쓰기를 해도 무시되어 버리지요. 지금은 위지윅 에디터가 &nbsp;로 처리해 주기도 하고 심지어 CSS로 구현할 수도 있지만, 예전엔 그냥 textarea였으니... 아마 이것도 들여쓰기의 쇠퇴에 영향을 주었을 거라고 생각됩니다. 입력한 포맷 그대로 출력되던 PC통신 시절에는 꼬박꼬박 들여쓰기하는 사람들이 남아 있었으니까요. 다만, 웹보다 더 열악한 줄간격 때문에 그 때도 엔터는 2번씩 치는 게 국룰이었습니다. ㅠㅠ

  • ?

    네. 저도 그냥 엔터 두 번 누르는 게 익숙합니다.
    nl2br로 br을 넣어주는 방법이죠. p태그의 마진을 없앤 것이 아니라요.

    "입력한 것이 어디로 가도 입력한 그대로"보여지는 것은 br로 구분 된 것이므로 뉴스 콘텐츠처럼 여러 곳으로 배포되는 컨텐츠는 br로 배포되는 것 같네요.

    줄간격을 1em으로할지 1.2로 할지 등의 어떤 게 더 이쁠까의 문제나 p태그 본연의 의도에 충실하지 못하는 등의 문제를 지적한 것이 아닙니다. 본문에 그런 말을 적은 내용은 없죠.

    p태그의 마진을 제거해서 그렇게 보이도록한 것이 적절한 선택이 아니라는 것입니다. 입력한 것이 그대로 보여지려면 컨텐츠가 쌓인 후에는 p태그의 마진은 변경하거나 다른 시스템으로 이전하거나 또는 다른 시스템에서 가져온 컨텐츠가 섞이면 이게 참 곤란해지죠.

     

    아, 그리고 이 부분은 관련 코드를 처리하신 기진님의 선택의 문제는 아닙니다.
    XE가 그런 기본 값을 가졌었기 때문에 그대로 유지하는 선택이 맞죠.

  • ? profile
    <p> 태그로 작성된 게시물을 다른 사이트에 복붙했을 때 여백이 달라지는 것은 각 사이트에서 사용하는 CSS에 따라 폰트, 글자 크기, 색깔 등이 달라질 수 있는 것만큼이나 자연스러운 일입니다. 0px이든 1em이든 특별히 더 옳거나 적절한 선택이란 없습니다. 스타일이 다를 뿐이지요.

    뉴스 콘텐츠 등 특별한 경우를 제외하면, 사용자가 글을 작성한 그 곳에서 사용자의 의도대로 보여지는 것으로 충분하다고 생각합니다. 운영자 입장에서도 내 사이트의 글을 남이 퍼가는 것까지 배려할 필요는 없고요.^^
  • profile ?

    네. 다른 곳으로 퍼갈 것을 배려할 필요가 없다는 내용은 본문에도 있습니다.
    이런 옵션이 있고, 제 입장에선 권장할 수 없는 기본 설정이니 변경을 권장한 것입니다.

    상황에 따라 변경이 발생한다면 br로 처리되었었다면 입력한 그대로의 개행을 가진채로 변화가 없었을텐데, margin 제거로 인한 차이가 발생할 수 있으니 이런 옵션을 미리 고려해두어야하고, 저는 margin 제거를 권장하지 않는다는 내용입니다.

    XE 때도 큰 이슈였었고 라이믹스에서 저 옵션이 생긴 시점에 어느 사용자가 약관 내용 입력 시  줄바꿈에 여백이 크다... 이거 이상하다라는 이슈가 연관되었던 것으로 알고 있습니다. 단순히 모양새가 조금 달라지는 정도가 아니라 컨텐츠 배치... 사용성 문제를 일으키는 부분인거죠. 단순 스타일의 차이라고 보진 않습니다.

     

    레이아웃에서 모든 요소의 스타일을 리셋해서 본문의 p태그의 마진이 제거되었을 때 여백 문제로 많은 질답이 오갔던 것도 사실이고, css reset을 사용을 지양해야하거나 이건 레이아웃 제작자가 잘못했다는 등의 이슈도 꽤 많지 않았습니까? (물론 이건 p 태그의 여백 뿐만 아니라 리스트 스타일 등 모든 것이 제거되었기 때문에 더 큰 문제였지만요;)

    데이터 마이그레이션이나 사이트 통합 등으로 컨텐츠 자체가 섞이거나 옮겨다닐 수 있고, 나중에 시스템을 변경(워드프레스로 넘어간다거나...)하거나 티스토리에 따로 운영하는 자사 블로그를 통합하는 등의 상황은 사이트 운영자로서는 고려해야 할 부분인 것 같습니다. 비록 시스템이 고려해줄 필요는 없더라도요.

    라이믹스에서 저 기본 값을 바꿔야 한다는 주장은 아닙니다. 사이트 운영자가 살펴봐야할 부분이라고 명시한 것입니다.

  • ? profile

    컨텐츠 배치는 글자 크기를 1px 키우거나 폰트만 바꿔도 크게 달라질 수 있습니다. 내용과 순서는 바뀌지 않았는데 단지 여백이 커져서 어색하다고 느낀다면 폰트나 글자 크기와 마찬가지로 스타일의 차이가 맞지요.

     

    아무튼 처음 라이믹스를 설치한 후 꾸준히 일관성있게 margin: 0으로 사용한 경우에는 문제가 되지 않고, 업그레이드나 데이터 이전 후 문제가 있다고 느끼는 운영자라면 바꿀 수 있도록 허용하는 것으로 만족합니다.

     

    말씀하신 것처럼 레이아웃에서 임의로 CSS를 리셋하는 경우 오히려 문단 여백과는 차원이 다른 큰 문제가 일어나는 것 같습니다. 특히 레이아웃과 게시판 스킨, 회원 스킨, 위젯 스킨 등을 모두 묶어서 세트로 판매하시는 분들은 자신이 판매하지 않은 다른 자료와 조합했을 때 어떤 결과가 나오는지 신경을 잘 안 쓰시더라구요. CSS 리셋은 옛날 얘기이지만, 요즘도 * { box-sizing: border-box; } 이런 것이 종종 호환성 문제를 일으키곤 합니다.

  • profile
    라이트, 다크 둘다 사용 중인데 라이트일 때 에디터 영역만 다크로 인식하는지 어둡게 나오더라구요 ㅎㅎ
    다시 토글하면 밝게 되는데, 다크모드 자동 감지 : 아니오 로 하면 모드 상관없이 계속 밝게 나오는거 맞는거죠?
  • profile ?
    네. 맞습니다.
    사이트 레이아웃이 다크모드를 지원하는 게 아니라면 설정을 '아니오'로 바꿔두시면 됩니다.