앙UI 개인화 버전 공개 (구 커스텀UI)
페이지 정보
본문
커스텀UI를 만들어서 공유드린적이 있는데
커스텀 UI는 다모앙에서 기본으로 제공하는 UI 커스텀과 이름이 유사하여
앙UI로 개명했습니다ㅡㅡ;
부연설명이 필요한 것만 아래에 안내드립니다.
아래 설명에 없는 기능들은 한 번 씩 적용해보시면 아실 수 있을 듯 합니다.
아래 모든 기능은 다모앙에서 소스를 변경하면 정상 동작하지 않습니다.
갑자기 잘 되던 기능이 동작하지 않을 경우 댓글로 알려주시면
변경된 소스에 맞게 수정하여 배포하겠습니다.
수정기능 막히기 전에 안내드립니다.
버그리포팅, 개선사항 요청 등 소통은 이 글의 댓글로 해주시면 됩니다.
최신 버전에 대한 개선사항은 자료실 쪽에 업데이트 해놓겠습니다.
앙UI
0. 확장 프로그램 설치 + 설정파일 업로드하여 사용할 수 있습니다.
- User JavaScript and CSS (google.com) <-클릭하여 설치
- 앙UI 최신버전 다운로드<-클릭하여 자료실 이동 후 다운로드
- 자세한 설치 및 적용 방법은 아래쪽 앙UI적용을 위한 확장 프로그램 설치 방법 참고하세요
1. 다모앙 UI에 약간의 편의성을 제공합니다(전체 기능 목록은 맨~아래쪽 이미지 참고)
2. 모든 기능 설정을 "앙UI" 버튼을 통해 화면에서 설정할 수 있습니다.
- 확장 프로그램 소스 코드를 전혀 수정하실 필요 없습니다.
3. 개인화 된 모든 설정은 브라우저 스토리지에 저장됩니다.
- 새버전 적용하더라도 내가 설정한 정보가 사라지지 않습니다.
- 브라우저 설정 들어가셔서 개인 보안 관련 파일 싹 지우시면 앙UI설정도 지워집니다.
- 다모앙 UI커스텀과 동일하게 현재 브라우저에만 저장됩니다.
4. 업데이트된 새버전이 나오면 설정 화면에서 알려주고 다운로드까지 가능합니다.
- 아래 이미지처럼 내가 사용중인 버전이 표시되고 새버전 등장시 버전 넘버링과 등장 메시지가 표시됩니다.
5. 기능 설정시 사용자의 노가다(수동설정)를 없앴습니다.
- 직접 값을 찾아서 입력하지 않고 목록에서 선택할 수 있습니다.
6. 피드백 페이지와 파일 다운로드 페이지를 분리하였습니다.
- 다모앙은 댓글 20개 이상 달리면 수정이 불가하기 때문에
파일은 자료실에서 피드백은 강좌 게시글에서 가능하도록 했습니다.
- 아래 이미지에서 ? 물음표를 클릭하면 지금 보고 계신 이 글로 이동합니다.
이 글의 댓글로 버그 리포팅 및 문의사항을 등록하시면 됩니다.
- 아래 미미지에서 첨부파일을 클릭하시면 자료실에 등록된 가장 최신 버전을 다운 받을 수 있습니다.
자료실로 이동하실 필요 없이 이 화면에서 다운 가능합니다.
자료실의 게시글에 댓글 절대 달지 마세요. 그럼 제가 새버전을 업로드 할 수 없습니다.
7. 즐겨찾기 기능을 제공합니다.
- 왼쪽 목록에서 즐겨찾기에 추가할 메뉴를 클릭하시고 추가 버튼을 클릭합니다.
- 우측에 추가한 목록에서 필요 없는 항목은 선택하고 삭제 버튼을 누립니다.
- 우측에 추가한 목록에서 순서 조정이 필요한 경우 클릭 후 위쪽, 아래쪽 화살표를 클릭하면 이동합니다.
7. 추천수 앞으로 이동 및 컬러세트 설정 기능을 제공합니다.
- 총 6가지 색상 세트를 제공합니다.
- 게시판 목록(공지사항이 테스트하기 좋습니다)을 화면에 띄워놓고 앙UI 들어가셔서 컬러 세트를 변경해보세요
Blue | Red | Green | Brown | Purple | Colorful |
 |  |  |  |  |  |
8. 설정 완료 후 저장 버튼을 클릭해야만 적용이 됩니다.
- 모든 설정은 기본값은 적용 안함입니다.
- 앙 UI 확장 적용 후 앙UI 설정 화면 들어오셔서 필요한 것만 적용하시면 됩니다.
앙UI적용을 위한 확장 프로그램 설치 방법
1. 크롬/엣지 확장을 설치합니다.
User JavaScript and CSS (google.com) <-클릭하여 설치
2. 설치한 확장 실행
1) 브라우저 상단 확장 아이콘 클릭 후 설치한 확장 프로그램명 클릭
2. 아래 이미지와 같은 화면이 나오면 + 더하기 버튼 왼쪽 동그라이 버튼 클릭
3. 확장 프로그램 설정 파일 업로드
1) 아래 이미지와 같이 세번째 아이콘 클릭한 후 Upload JSON 버튼 클릭
2) 다운받은 설정 파일 선택 후 업로드
4. 완료되었습니다. 아무것도 수정하지 마시고 다모앙 페이지를 새로고침합니다.
다모앙 상단 메뉴에 앙UI 버튼이 생겼다면 적용에 성공한 것입니다.
앙UI를 클릭하시고 필요한 기능을 활성화 하세요.
앙UI 전체 기능(설정화면)
지푸라기님의 댓글의 댓글
프로필에 표시되는 것과 메뉴목록에 표시되는 것
2가지는 약간 다릅니다.
메뉴쪽에 표시되는 것은 다모앙에서 제공하는 것으로
내가 작성한 모든 글/댓글을 조회하는 것이 아니라 최근 작성한 것만 조회를 해줍니다.
(예를들어 최근 30건이 아니라 최근 30일 이런식이라서 최근에 글 작성을 안했다면 조회되지 않습니다)
다모앙에서 사용하는 그누보드에서 성능을 고려하여 그렇게 구성이 된 듯 합니다.
그래서 내글/내댓글을 전체 기간 대상으로 최근 30건을 조회할 수 있는 기능을
프로필쪽에 추가한 것입니다.(건수 기준이라 무조건 30건은 나옵니다)
다모앙에서 내글과 내 댓글 데이터를 구분해서 제공하지 않기 때문에
다 합쳐서 조회가 되긴 하지만 최근30건을 확인할 수 있습니다.
내가 댓글 단 글 찾아보고 싶을 때 나름 유용하기 때문에 기능 유지하고 있습니다만
다모앙 개발진에서 이와 관련해서 조회 기준을 개선하여 적용하면
이 기능은 제거할 예정입니다.
지푸라기님의 댓글의 댓글
혹시 다모앙 UI커스텀을 변경하여 적용하셨다면 일시적으로 이런 증상이 생길수도 있고요(적용 후 새로고침을 해야 온전히 적용이 됩니다)
다모앙에서 개발진에서 가끔 패치하면서 꼬이는 경우가 생기기도 해서
저 상태가 새로고침을 해도 계속 지속되는건 아니시라면 그냥 무시하셔도 될 듯 합니다.
지금 최적화 버전 1.0.9 버전을 올렸는데 이 버전을 한번 적용해보세요.
혹시 계속 증상이 발생하시면 피드백 주세요. 같이 들여다보시죠^^
지푸라기님의 댓글의 댓글
화면상 데이터를 조작해서 그리기 때문에 일시적으로 화면을 감추고 데이터 조작한 후 보여주고 있습니다.
근데 이게 아주 잠깐의 순간이라 전 50번 정도 리프레시해야 한 번 나올까 말까 한 증상이라 무시하고 있었습니다.
오류라기 보단 의도한거라서요
이렇게 처리하지 않으면 화면이 그려지는 과정이 실시간으로 눈 앞에서 보여지기 때문에
그게 더 보기가 안좋더군요
그리고 다모앙은 화면 로딩시 부가적인 네트워크 요청이 너무 많아서 어쩔 수가 없습니다.
ㅋㄹㅇ 메인 페이지는 로딩하는데 네트워크 요청 9개를 합니다.
근데 다모앙은 무려 169개의 요청을 해요. 그러니 느릴 수 밖에 없습니다.
거기다가 앙UI는 데이터 조작을 하기 때문에 느리지 않은 척을 하려고 화면을 감췄다가
데이터가 준비되면 짜잔~하고 화면을 그려줍니다 ㅡㅡ;
다모앙 개발팀에서도 이런저런 개선사항을 준비하고 있고 열심히 달려주고 계셔서
차차 더 좋아질 것 같아요.
오늘 자정에 시작되는 다모앙 패치가 끝나면 다시 한번 보시죠
자연스레 해결될지도 몰라요..^^;
요즘 다모앙 발전하는 속도를 보면....슬슬 앙UI가 없어져야 할 시기가 다가오지 않나 싶어요.^^
피드백 종종 주셔서 넘 감사드려요. 앞으로도 잘 부탁드려요^^;
기적님의 댓글의 댓글
그런데 여기 3번째 스크린샷 보시면 도메인, JS, CSS 입력란이 따로 분리되어 있는데 어떻게 입력해야 작동할까요?
https://addons.mozilla.org/ko/firefox/addon/custom-style-script/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
지푸라기님의 댓글의 댓글
테스트 해봤는데 내부 버전을 잘 못 기재한게 있어서 1.1.1->1.1.2로 수정한걸 자료실에 다시 올리긴 했습니다.
근데 기능적으로는 일단 전 잘 되고 있어서 아마도 이전 버전이 선택된 걸수도 있어요
저도 이거 적용하면서 보니까 이상하다 적용했는데 왜 똑같지? 할때가 있거든요
그 때 보면 방금 다운한 버전이 아니라 이전 버전이 적용되었습니다.
아마도 약간의 갭이 있어서 다운 받은 파일이 적용시 맨 앞에 위치하지 않는 경우가 있지 않을까 합니다.
파일 버전 1.1.2 확인하시고 다시 한번 적용해봐주세요^^;
지푸라기님의 댓글의 댓글
새벽에 다모앙에 캐시가 도입되서 다운로드 링크에 변경이 생겼네요.
앙UI 설정에서 다운 시도하시면 오류가 날거에요.
업데이트 확인 버튼 누르셔서 링크를 새로 가져오시면 정상적으로 다운이 됩니다.
그리고 모바일에서는 뭔가 보안 정책 변화로 인해 링크 다운로드가 안되는 것 같습니다.
관련해서 안내 메시지를 출력하는 마이너 업데이트를 올렸습니다.
모바일에서는 자료실로 직접 이동해서 파일을 다운 받아야 할 듯 해요.
다모앙 정책이 뭔가 변화가 생긴다면 추 후 될 수도 있겠지만...일단 지금은 안되네요 ㅋ
지푸라기님의 댓글의 댓글
모바일에서 앙만 나오는건 일부러 그렇게 했습니다.
예전에 적용했던 버튼이 이미지가 아니고 텍스트 글자로 만든 애니메이션인데
이 글자의 위치를 지정하려면 고정위치를 사용해야해요
근데 모바일과 PC의 여백의 기준도 다르고 사용자마다 폰트 사이즈도 다르고
변수가 많아서 다른 메뉴랑 동일하게 위치를 잡기가 어렵더군요
그래서 애니메이션 사용하지 않고 모바일에선 앙으로 PC에선 앙UI로 나오게 변경했습니다.
줄간격, 글자크기 변경 기능이 없다면 동일하게 맞출 수 있는데
그 기능들 때문에 변수가 생겨서 이렇게 한 것이니 감안하고 사용해주세요^^;
지푸라기님의 댓글의 댓글
전 괜찮긴 했는데..다시 적용하셔서 잘 되신다니..일시적인 상황인 듯 해요..^^;
그리고...앙UI에서 제공하는 기능 중 일부를 선별해서 다모앙 본진에 추가하는 작업을 조금씩 진행하고 있습니다.
그 첫 단추는...댓글 복사 기능이 될 듯 해요.
본진에 다 밀어넣고...앙UI는 희소성?있는 기능 위주로 남겨둘까 하네요..ㅋ
지푸라기님의 댓글의 댓글
네이버 소셜 로그인을 해놨는데도 계속 회원 가입 화면으로 이동하기도 하고
뭔가...저도 쓰면서 좀 다르게 동작하는 경우가 있었습니다.
다행히? 전 실행이 안되는 경우는 없긴 했는데
확장 실행할 때 가끔 쓸 수 없는것처럼 나오기도 했습니다.
그땐 그냥 다 종료하고 브라우저 다시 띄우니까 되긴 했는데
살짝 확장 프로그램 충돌이 간헐적으로 발생하는 것 같기도 해요.
이 확장이 결국 브라우저에 코드를 후킹해서 넣는거라
소스 변화에 영향을 받을 수도 있고요....
일단 모바일에서 되는것만으로도 감사한 마음이라...잘 써봐야죠..^^;
밴플러님의 댓글
사용중 불편함이 있어 댓글 남깁니다 ㅎㅎ
if (recommend <= 5) {
// 0~30
fontColor = '#000000';
backColor = '#ffffff';
opt1 = 75;
opt2 = 75;
} else if (recommend > 5 && recommend <= 10) {
// 31~50
backColor = '#b3ffa2'; //#ffb37a
fontColor = '#333333';
opt1 = 60;
opt2 = 60;
} else if (recommend > 10 && recommend <= 50) {
// 51~100
backColor = '#ffd57a';
fontColor = colorSet == 'colorful' ? '#333333' : '#ffffff';
opt1 = 45;
opt2 = 45;
} else if (recommend > 50) {
// 100~
backColor = '#e24a4a';
fontColor = '#ffffff';
opt1 = 30;
opt2 = 30;
위 보시는바와 같이 추천수에 따른 추천수 표시를 수정해서 사용합니다.
다모앙이 아직 초기라 그런지 추천수 100개넘는게 거의 드물죠.
그리고 [추천수 앞으로 이동 / 컬러 세트 설정] 부분을 colorful 초기설정 그대로 사용하면
자유게시판쪽이 죄다 빨간색으로 표시되서 보기가 영 불편하더라구요.
(blue/red/green/brown/purple 이런거 다른분들은 사용할까 싶긴하네용 ㅎㅎ)
그래서 업데이트 될때마다 저 부분을 수정하는데 요즘 업데이트가 잦아서
수정을 많이 한거 같더라구요 ㅋㅋ
추천수 갯수 부분과 추천수에 따른 배경부분을 앙UI 개인화 설정 부분에서 텍스트 박스나 값을 입력할 수 있게
해주시면 어떨까 싶어서 감히(?) 요청드려봅니다. ㅎㅎ
지푸라기님의 댓글의 댓글
원래 5단계로 되어있던 것을 4단계로 줄이면서 숫자의 폭을 같이 줄였는데
공지사항이나 추천글에는 괜찮은데 일반적인 글은 추천수가 적어서
좀 색상 변화가 크지 않더군요.
안 그래도 한 번 변화를 주려고 했는데 마침 의견을 주셔서 다행이네요^^
일단 색상별 추천수의 폭은 사용하고 계신 기준이 제 생각과 거의 같아서
그대로 수용하려고 합니다.
그리고 5건 이하의 경우 배경색은 회색 계열로 사용할 예정입니다.
흰색으로 하면 Dark모드는 괜찮은데 Light모드 쓰시는 분들은
숫자만 덩그러니 보여서 조금 이질감이 생길 듯 합니다.
사용자가 직접 입력하여 수정하는 것은 가급적 지양하려고 합니다.
더 선호하는 방식으로 기본 제공하려고 합니다.
참고로 저도 colorful을 주로 사용합니다.
다른 색상은...이런 스타일을 원하시는 분이 계셔서 만들어서 넣어봤고요.
저도 가끔 다른 기분?을 내고 싶을 때 한번씩 설정하곤 합니다 ㅋ
위 내용은 차차 업데이트 하겠습니다..
어디에 업데이트가 될지는...지켜봐주세요 ㅎㅎ
지푸라기님의 댓글
다모앙에서 패치를 했는데 상단 메뉴에서 다크모드/라이트모드 버튼을 삭제했네요.
앙UI 버튼은 그 버튼을 기준으로 추가를 했었는데 기준되는 버튼이 없으니 추가를 못하고 있었습니다.
패치를 급하게 만들어서 올렸습니다.
이젠 사라질 것 같지 않은 메뉴버튼 바로 옆에 추가를 했으니 오래 버텨주면 좋겠네요
버튼이 사라져서 업데이트 소식도 전혀 듣지 못하시는 분들이 계실텐데
이곳 또는 자료실까지 잘 찾아오시길 바랍니다 ㅜㅜ
https://damoang.net/pds/166
지푸라기님의 댓글의 댓글
본진 소스가 바뀌어서 기존 앙UI 추천수 변경 기능은 지금은 동작하지 않아요.
앙UI에 있는 추천수 변경 기능은 제거할 예정이라서 수정하지 않았습니다.
앙UI 설정 화면 들어가셔서 추천수 색상 미사용으로 선택하고 적용해보세요.
5건 이하를 회색으로 바꾼 이유는 라이트 모드일 때 배경이 흰색이라 버튼이 보이지 않아서 변경했습니다.
왕 따봉 드립니다~ 지푸라기님의 댓글의 댓글
이 때 화면을 다시 그리는데 앙UI가 수정한 UI를 그리는 것이 아니라
다모앙 본진 소스 기준으로 화면을 그립니다.
그래서 앙UI가 반영되지 않은 상태가 되었다가 페이지 새로고침을 하면 앙UI가 반영이 됩니다.
어쩔 수 없는 부분이긴 합니다.
하려고 하면 할수는 있을 듯 한데
페이지를 새로고침 하면 댓글들 쭉 읽으면서 댓글 다시는 분들이 좀 불편하실거에요.
그래서 안 고치고 걍 두고 있긴 했었습니다.
지푸라기님의 댓글의 댓글