맥분투 : DING ( Desktop Icon NG ) 활성화 및 커스텀

DING ( Desktop Icon NG ) 

우분투에서 DING(Desktop Icons NG)은 GNOME 바탕화면에 아이콘을 표시하는 기능을 제공하는 확장 프로그램입니다.

예전 GNOME에서는 바탕화면에 파일이나 폴더를 자유롭게 배치할 수 있었지만, 이후 버전부터는 이 기능이 기본에서 제거되었습니다. 

GNOME 개발진은 바탕화면을 파일 저장소처럼 사용하는 것을 권장하지 않고 파일 관리는 파일(파일앱)에서 하는 것이 더 효율적이라고 판단했고 이후 순정 GNOME을 설치하면 바탕화면에는 배경화면만 보이고 아이콘은 나타나지 않게 되었습니다. 

하지만 우분투 사용자들은 Windows처럼 바탕화면을 사용하는 경우가 많기 때문에, 우분투의 경우 DING이 기본 포함되어 있습니다. 

Gnome 확장 앱에서 보면 기본적으로 DING이 포함되어 있다.

활성화 방법 

https://god-logger.tistory.com/261

우분투 24.04 그놈 쉘 확장 / 그놈 tweaks 트윅스

 

위 페이지를 통해 GNOME 확장 설정을 설치하세요.

이후 대시보드에 들어가 확장 아이콘을 이용하여 확장 모드를 활성화 후 ON/OFF 토글버튼을 통해 DING을 활성화 할 수 있습니다.

기능

• 바탕화면 내 개인폴더, 파일, 휴지통, 외장 저장 장치, 네트워크 드라이브 표시
• 아이콘 정렬 방식 설정
• 바탕화면 아이콘 크기 조정  
• 영역 선택 ( 선택영역 )

단점

DING 덕에 바탕화면에서 드래그 & 드랍을 통해 영역을 선택할 때 색상을 조절하는 옵션이 아직 존재하지 않습니다. 

이에 이 부분에 대해서 아래 그림과 같이 Mac OS 스타일에 맞게 설정하도록 하겠습니다.

순정

파랗고 파랗고 파랗다..

변경

이제 좀 맥같네

기존 사용하는 Mac OS의 색과 최대한 비슷하게 작업해보았습니다. 취향에 따라 바꾸실 수 있습니다. 

 

선택 영역 커스텀 방법

아래 파일 하나만 수정하면 됩니다.

파일위치 : /usr/share/gnome-shell/extensions/ding@rastersoft.com/app/desktopGrid.js

해당 파일을 편집툴이나 nano 등을 이용하여 로드하여 _doDrawRubberBand 함수를 찾습니다.

...
    _doDrawRubberBand(cr) {
        if (this._desktopManager.rubberBand && this._desktopManager.selectionRectangle) {
            if (!this.gridGlobalRectangle.intersect(this._desktopManager.selectionRectangle)[0]) {
                return;
            }
            let [xInit, yInit] = this.coordinatesGlobalToLocal(this._desktopManager.x1, this._desktopManager.y1);
            let [xFin, yFin] = this.coordinatesGlobalToLocal(this._desktopManager.x2, this._desktopManager.y2);

            cr.rectangle(xInit + 0.5, yInit + 0.5, xFin - xInit, yFin - yInit);
            Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                red: this._desktopManager.selectColor.red,
                green: this._desktopManager.selectColor.green,
                blue: this._desktopManager.selectColor.blue,
                alpha: 0.6,
            })
            );
            cr.fill();
            cr.setLineWidth(1);
            cr.rectangle(xInit + 0.5, yInit + 0.5, xFin - xInit, yFin - yInit);
            Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                red: this._desktopManager.selectColor.red,
                green: this._desktopManager.selectColor.green,
                blue: this._desktopManager.selectColor.blue,
                alpha: 1.0,
            })
            );
            cr.stroke();
        }
        if (this._desktopManager.showDropPlace && (this._selectedList !== null)) {
            for (let [x, y] of this._selectedList) {
                cr.rectangle(x + 0.5, y + 0.5, this._elementWidth, this._elementHeight);
                Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                    red: 1.0 - this._desktopManager.selectColor.red,
                    green: 1.0 - this._desktopManager.selectColor.green,
                    blue: 1.0 - this._desktopManager.selectColor.blue,
                    alpha: 0.4,
                })
                );
                cr.fill();
                cr.setLineWidth(0.5);
                cr.rectangle(x + 0.5, y + 0.5, this._elementWidth, this._elementHeight);
                Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                    red: 1.0 - this._desktopManager.selectColor.red,
                    green: 1.0 - this._desktopManager.selectColor.green,
                    blue: 1.0 - this._desktopManager.selectColor.blue,
                    alpha: 1.0,
                })
                );
                cr.stroke();
            }
        }
    }

 ...

위 코드에서 처음 red/green/blue/alpha 는 내부, 그다음 RGBA는 테두리 구조로 되어있습니다.

내부 채우기

기존 부분 

Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
    red: this._desktopManager.selectColor.red,
    green: this._desktopManager.selectColor.green,
    blue: this._desktopManager.selectColor.blue,
    alpha: 0.6,
}));

변경 

Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
    red: 0.85,
    green: 0.92,
    blue: 0.96,
    alpha: 0.16,
}));

외곽선

기존 부분

Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
    red: this._desktopManager.selectColor.red,
    green: this._desktopManager.selectColor.green,
    blue: this._desktopManager.selectColor.blue,
    alpha: 1.0,
}));

변경 

Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
    red: 0.85,
    green: 0.88,
    blue: 0.92,
    alpha: 0.9,
}));

수정 완료 코드

_doDrawRubberBand(cr) {
        if (this._desktopManager.rubberBand && this._desktopManager.selectionRectangle) {
            if (!this.gridGlobalRectangle.intersect(this._desktopManager.selectionRectangle)[0]) {
                return;
            }
            let [xInit, yInit] = this.coordinatesGlobalToLocal(this._desktopManager.x1, this._desktopManager.y1);
            let [xFin, yFin] = this.coordinatesGlobalToLocal(this._desktopManager.x2, this._desktopManager.y2);

            cr.rectangle(xInit + 0.5, yInit + 0.5, xFin - xInit, yFin - yInit);
            Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                red: 0.85,
                green: 0.92,
                blue: 0.96,
                alpha: 0.16,
            })
            );
            cr.fill();
            cr.setLineWidth(1);
            cr.rectangle(xInit + 0.5, yInit + 0.5, xFin - xInit, yFin - yInit);
            Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                red: 0.85,
                green: 0.88,
                blue: 0.92,
                alpha: 0.9,
            })
            );
            cr.stroke();
        }
        if (this._desktopManager.showDropPlace && (this._selectedList !== null)) {
            for (let [x, y] of this._selectedList) {
                cr.rectangle(x + 0.5, y + 0.5, this._elementWidth, this._elementHeight);
                Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                    red: 1.0 - this._desktopManager.selectColor.red,
                    green: 1.0 - this._desktopManager.selectColor.green,
                    blue: 1.0 - this._desktopManager.selectColor.blue,
                    alpha: 0.4,
                })
                );
                cr.fill();
                cr.setLineWidth(0.5);
                cr.rectangle(x + 0.5, y + 0.5, this._elementWidth, this._elementHeight);
                Gdk.cairo_set_source_rgba(cr, new Gdk.RGBA({
                    red: 1.0 - this._desktopManager.selectColor.red,
                    green: 1.0 - this._desktopManager.selectColor.green,
                    blue: 1.0 - this._desktopManager.selectColor.blue,
                    alpha: 1.0,
                })
                );
                cr.stroke();
            }
        }
    }

이후 로그아웃 후 로그인을 해보면 변경된 모습을 확인할 수 있습니다.