태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

Atom 로고

Atom?

 Atom은 Github에서 제작한 hackable한 텍스트 에디터입니다. 다양한 프로그래밍 언어는 물론이고 마크업 언어 같은 것도 지원하기 때문에 아주 편하게 사용할 수 있고, 필요한 부가 기능을 추가적으로 설치, 제작 및 배포할 수 있는 확장성을 제공합니다. 테마 역시 자유롭게 설정할 수 있습니다. Atom은 Node.js와 Electron을 사용하여 제작되었습니다.

 Atom은 윈도우, 리눅스, macOS를 모두 지원하고, 오픈소스 프로젝트로 제작되었습니다. 저는 다양한 OS를 사용하고 있기 때문에 아주 즐겨 사용하고 있습니다. 다 좋은데 개인적으로 단점이라고 생각하는 점은 초기 실행 속도가 좀 느리다는 점입니다. 다른 에디터들은 빠른데 말이죠. 좀 더 개선이 되었으면 하는 부분이 있네요.

 Atom은 여기서 다운로드 할 수 있습니다.


Atom 패키지

 앞에서 이야기했듯이 Atom은 패키지를 통해 기능을 확장할 수 있고 에디터를 개인화할 수 있습니다. 상당히 강력한 패키지들이 많고, 실제로 사용하는 데에 있어서 엄청 유용합니다. 그래서 이번엔 제가 쓰는 패키지 몇 가지를 소개해드리려 합니다.


내가 쓰는 Atom 패키지들

atom-beautify

 코드를 정렬해주는 패키지입니다. 상당히 많은 언어를 지원하고 있고, 사용이 간편합니다.

color-picker

 코드 내에서 색상 선택기를 열 수 있는 툴입니다. 생각보다 엄청 편합니다.

emmet

 웹 개발자들에겐 거의 필수라고 할만한 툴이 아닐까 싶습니다. HTML/CSS 코딩 속도를 엄청나게 향상시켜줍니다. 기능도 다양하고 어느 정도 익숙해지면 정말 편합니다. 기능이 엄청 많기 때문에 기능 설명은 여기서 확인하시면 됩니다!

file-icons

 트리뷰에 나타나는 아이콘들을 좀 더 예쁘고 컬러풀하게 바꿔줍니다.

highlight-seleted

 더블클릭한 단어를 전체 문서에서 하이라이팅 해줍니다. 별 거 아닌 것 같지만 실제로 사용해보면 엄청 편합니다.

minimap

 문서의 미니맵을 보여줍니다. 빠르게 이동할 때 편합니다. Sublime Text에는 기본적으로 있던 기능인데 Atom에서는 패키지로 따로 있더라구요.

minimap-hightlight-selected

 미니맵에서 highlight-seleted를 동작하게 해주는 패키지입니다. 미니맵 쪽에 보시면 선택한 단어들이 좀 더 밝게 표시되어있는 게 보이죠?

pigments

 문서 내에 있는 색상 코드를 바로 볼 수 있게 해줍니다. 개인적으로 아주 잘 쓰고 있는 패키지입니다.

remote-ftp

Atom에서 FTP/FTPS/SFTP 사용을 가능하게 하는 패키지입니다. 트리뷰에 다른 탭으로 생기기 때문에 아주 편하게 사용할 수 있습니다. 이미지는 좀 오래 된 이미지네요.

sync-settings

 여러 종류의 기기에서 같은 환경의 Atom을 사용하려 할 때 무척 편리합니다. 초기 설정시 Github gist 설정이 필요하지만 한 번 설정해두면 정말 간편하게 Atom 설정 및 패키지를 동기화할 수 있습니다. 사용 방법은 다음에 쓸 수 있도록 하겠습니다. ㅠㅠ


마치며

 요즘은 고민이 참 많습니다. 블로그에 어떤 글들을 채워 넣어야 할 지, 좋은 글들을 잘 쓸 수 있을지 생각해보니 잘 모르겠더라고요. 제가 한 없이 부족하게 느껴지더라고요. 그래서 그냥 편하게 글 쓰려고 합니다. 아는 만큼, 쓸 수 있는 대로 쓰다 보면 언젠가 좋은 글들을 쓸 수 있을 거라고 생각하고 있습니다. 처음부터 잘하는 사람은 없으니 열심히 경험치를 늘려서 실력을 업그레이드 해야겠어요. 앞으로도 열심히 배우고 열심히 글 쓰는 사람이 되어야겠습니다. ㅎㅎ 오늘도 글 봐주셔서 감사합니다. 앞으로는 좀 더 자주 글을 쓸 수 있도록 해보겠습니다.

블로그 이미지

플린 N.

IT, 컴퓨터, 모바일 및 취미, 리뷰 블로그

댓글을 달아 주세요

Captin: A tool to show Mac caps lock status.

 Captin: A tool to show Mac caps lock status.


 저는 여러 종류의 PC를 사용하고 있습니다. 메인 PC인 윈도우 PC와 개발용으로 쓰는 맥북 프로 레티나(이하 맥북), 그리고 개인 개발 서버인 우분투 PC를 비롯하여 NAS까지 사용하고 있습니다. 개발을 주로 맥북으로 하고 있는데, 제 맥북엔 한 가지 문제가 있습니다. Shift 키가 가끔 먹히지 않는다는 건데요. 구입할 때부터 그랬는데 귀찮다고 교환을 안 해버렸더니 아직까지 쓰고 있네요.

 평소에는 큰 문제가 안 되는데, 개발할 때 보면 좀 짜증날 정도로 문제가 생깁니다. 고속 타이핑을 할 때 Shift 키가 먹히지 않아서 오타가 꽤나 많이 발생하게 되더라고요. 키보드에 불빛으로 Shift 키의 상태가 보이긴 하지만, 보통 타이핑을 할 때는 화면을 주로 보고 타이핑을 하게 되잖아요? 그러다보니 별 도움이 안 되더라고요. 그래서 괜찮은 앱 없을까 하다가 찾은 앱이 바로 Captin이라는 앱입니다. 기능은 간단하지만 설정을 꽤 세부적으로 할 수 있어서 마음에 들었고, 비교적 최신 앱이라서 요즘 계속 사용하고 있답니다. 그리고 무료에요!

 Captin 받으러 가기(무료)

 간단한 앱인 듯 하면서도 많은 설정을 할 수 있는 앱인데요. 기능을 하나씩 소개해보고자 합니다. 먼저 설정창을 볼까요?

Captin 설정 부분 - General

 General 부분인데요. 여기서는 로그인시 Captin을 실행할 건지와 실행시 현재 설정을 보여줄 건지, 화면에 바로 보여주는 HUD의 크기, 배경 색상, 텍스트 색상 및 화면에 나타날 시간을 ON/OFF별로 따로 설정할 수 있습니다.

Captin 설정 부분 - Displays

 Displays 부분에서는 각각의 디스플레이 별로 따로 위치를 지정해줄 수 있습니다. 저는 정 중앙 하단이 제일 나은 것 같아서 정 중앙 하단으로 설정하고 Y padding을 조금 줬네요. 제 설정대로 하시면 아래처럼 보인답니다.


Captin HUD 위치


 괜찮죠? 자신이 원하는 색상과 위치로 자유롭게 설정할 수 있는 부분이 참 좋습니다.

Captin 설정 부분 - Icon

 다음은 Icon 부분인데요. 이 부분에서는 메뉴 바에 위치한 아이콘과 독 바에 위치하는 아이콘의 설정을 할 수 있는데요. 독 바에 나타나는 아이콘은 보이게 할 지, 안 보이게 할 지를 선택할 수 있습니다. 메뉴 바에 나타나는 아이콘의 경우에는 Caps lock이 켜져있을 경우 보이는 Light color를 자유롭게 선택할 수 있으며, 색상이 아닌 심볼로도 바꿀 수 있습니다. 아이콘의 모양도 간단하게 설정할 수 있어요.


 


 이렇게 말이죠! 눈에 잘 띄도록 설정하는 게 좋겠죠?

Captin 설정 부분 - Sound

 마지막으로는 Sound 부분입니다! 여기서 Caps lock의 상태별로 소리를 다르게 지정할 수 있어요.

 확실히 Captin을 사용하고 나서부터는 Caps lock의 상태를 바로바로 알 수 있게 되어서 좋더라구요. 오타도 꽤나 줄어들고 있구요. 무료임에도 불구하고 정말 정말 좋은 앱입니다. 여러분도 맥북에서 Caps lock 키 사용의 불편함을 느끼셨다면 사용해보세요! 타이핑의 질이 달라질 겁니다. ㅎㅎ 오늘도 글 봐주셔서 감사합니다! 다음에 또 들러주세요!

블로그 이미지

플린 N.

IT, 컴퓨터, 모바일 및 취미, 리뷰 블로그

댓글을 달아 주세요

스타벅스 2018 럭키백 1


 올해도 어김 없이 스타벅스 럭키백이 찾아왔습니다! 작년에는 시간도 없고 돈도 없어서 구매하지 않았는데요. 올해는 색상도 예쁘고 마침 돈도 있고 해서 한 번 사보자! 하는 느낌으로 구매를 해봤습니다. 제 주변에 있는 스타벅스는 오전 7시에 오픈을 해서, 적당히 6시 20분까지 갔는데도 불구하고 제 앞에 두 분이 계시더라구요. 그래도 제가 간 매장에는 8개가 입고되어서 문제 없이 구매할 수 있었답니다.


스타벅스 2018 럭키백 2


 럭키백 구매 당일은 엄청 추운 날이었는데, 40분 정도 기다렸더니 진짜 손, 발이 너무 시렵더라구요. 겨울에 출시하는 MD 사려고 기다리는 건 앞으로 못해먹겠다는 생각이 들었습니다. ㅠㅠㅋㅋ 올해 신년 MD는 디자인도 영 별로더라구요. 그래서 하나도 구매하지 않았더니 블로그에 올릴 게 없네요.


스타벅스 2018 럭키백 오픈 1


 럭키백을 오픈했더니 먼저 쪽지가 절 반겨주더라구요.


스타벅스 2018 럭키백 오픈 2


 내용을 보아하니, 올해도 잘 부탁한다는 내용이었습니다. 예쁜 MD많이 만들어줘… 나도 우수고객 해보고 싶다… 그리고 열심히 포장을 뜯었습니다.


스타벅스 2018 럭키백 내용물들


 MD들은 각자 개별 포장이 잘 되어있었습니다. 제가 나온 제품들은 이렇습니다. 뭐 나름 괜찮은 구성이라고 생각하네요. 사실 저는 이렇게 많이 들어있을 거라고는 생각하지 못했는데, 좋습니다. ㅎㅎ 하나씩 둘러볼까요?


스프링 버터플라이 미니 볼


 요건 2017 봄 MD로 나왔던 스프링 버터플라이 미니 볼이네요. 제가 이런 접시나 그릇 쪽은 구매를 안 해서 썩 맘에 드는 제품은 아닙니다. ㅠㅠ 사이즈도 너무 작고… 나중에 소스 담을 용도로 써야겠어요.


레드 케인 데미 머그 1

레드 케인 데미 머그 2


 2016 크리스마스 MD로 나왔던 레드 케인 데미 머그! 에스프레소 잔인 것 같은데, 에스프레소 역시 마시지 않는다는 거. 커피는 좀 달달해야죠. ㅋㅋㅋㅋ 요것도 소스 담을 용도나 소주잔으로 쓰이지 않을까 합니다. ㅋㅋㅋㅋㅋㅋㅋ


크리스마스 머플러 머그 1

크리스마스 머플러 머그 2


 요것도 2016 크리스마스 MD로 나왔던 크리스마스 머플러 머그입니다. 크리스마스 MD임에도 불구하고 꽤 깔끔하고 무난한 디자인이라 꽤 마음에 듭니다. 머그를 잘 사용하지는 않지만 하나 더 생겨서 좋기는 하네요.


럭키백 시온 머그 1

럭키백 시온 머그 2


 요건 2018 럭키백 한정 MD인 럭키백 시온 머그입니다. 사이즈가 다른 머그들보다 조금 더 크더라고요. 디자인도 뭐 꽤 귀여운 듯. 하지만 돈 주고 살만한 디자인은 아닌 듯 싶습니다. 지극히 제 취향입니다. 요것도 잘 써줘야겠어요.


하트 레나 워터보틀


 요건… 2017 발렌타인 MD입니다. 발렌타인 MD는 디자인이 너무 부담스러워서 살 일이 없었는데, 덕분에 하나 생기게 되네요. 역시 디자인이 부담스럽기 때문에 실사용 하는 일은 없을 듯 합니다. 여자친구가 쓰거나 하겠지요.


루스터 피비 워터보틀


 2017 신년 MD로 출시했던 루스터 피비 워터보틀입니다. 이렇게 생긴 워터보틀은 단 한 개도 없었는데, 이렇게 또 하나 생깁니다. ㅎㅎ 같은 시기의 다른 워터보틀을 쓰고 있는데, 요것도 실사용으로 잘 써먹어야겠어요.


SS 매트 블랙 콜드컵 텀블러


 제가 정말 가지고 싶어했던 SS 매트 블랙 콜드컵 텀블러! 2017 코어 MD로 출시했었는데, 당시엔 돈 나갈 일이 많아서 구매하지 않았거든요. 이렇게 결국 제 손에 들어옵니다. 저는 개인적으로 스테인리스 콜드컵이나 플라스틱 콜드컵을 좋아해서 자주 써먹을 듯 합니다!


스타벅스 윷놀이 세트 1

스타벅스 윷놀이 세트 2

스타벅스 윷놀이 세트 3


 역시 2018 럭키백에만 들어있는 윷놀이 세트입니다. 생각보다 퀄리티도 괜찮더라구요. 윷놀이를 언제 할까 싶긴 한데, 여자친구랑 하던가 하면 되겠지요. 어쨌든 윷놀이판까지 퀄리티가 좋아서 놀랐던 제품입니다. 좋아요~

 이렇게 제 첫 스타벅스 럭키백 구매를 소개해봤습니다. 꽤 마음에 드는 MD들이 나와서 저는 마음에 드네요. 인스타그램 보니까 맘에 안 들어하시는 분들도 꽤 있으시고, 행운의 1,000명 중 한 명에 든 분도 계시더라고요. 저는 아쉽게도 들지 못했네요. ㅠㅠ 이게 뜯는 재미도 있고 언제 MD인지 보는 재미도 있고, 심지어 중복도 없었어서, 내년 럭키백도 살 듯 합니다. ㅎㅎ 여러분들은 럭키백 결과 어떠셨나요? 오늘도 방문해주셔서 감사합니다! 다음에 또 들러주세요~

블로그 이미지

플린 N.

IT, 컴퓨터, 모바일 및 취미, 리뷰 블로그

댓글을 달아 주세요

 안녕하세요. 오늘은 Java Swing의 JButton을 둥근 형태로 만들어보려고 합니다. 저는 보통 개발을 할 때 기본적인 모양을 주로 썼는데요. 점점 디자인을 바꿔보고 싶어지더라구요. 가장 만만한 버튼부터 변형시켜보려 했는데, 이게 생각처럼 잘 안 돼서 여러 번 삽질을 한 기억이 있습니다. 이번에는 기록도 할 겸 블로그에 기록을 좀 해보려고 합니다.


둥근 버튼 미리보기


 좌측의 버튼은 기본적인 JButton의 모양입니다. 다소 밋밋하고, 올드한 느낌이 없잖아 있죠. 그리고 우측은 제가 임의로 모양을 바꾼 버튼입니다. 이번에는 요 버튼을 만들어볼 예정입니다. 그렇게 어렵지 않습니다!


public class RoundedButton extends JButton {

    public RoundedButton() {
        super();
    }

    public RoundedButton(String text) {
        super(text);
    }

    public RoundedButton(Action action) {
        super(action);
    }

    public RoundedButton(Icon icon) {
        super(icon);
    }

    public RoundedButton(String text, Icon icon) {
        super(text, icon);
    }
}


 먼저 JButton을 상속받는 클래스를 하나 만듭니다. 이 클래스가 둥근 버튼을 만들 거기 때문에 이름을 RoundedButton라고 했습니다. 이 상태로 버튼을 만들면 그냥 일반적인 JButton 모양이 됩니다. 먼저 기본 모양에 있는 테두리를 없애버리고, 반드시 불투명하도록 만들어보겠습니다.


public class RoundedButton extends JButton {


    public RoundedButton() {
        super();
        decorate();
    }

    public RoundedButton(String text) {
        super(text);
        decorate();
    }

    public RoundedButton(Action action) {
        super(action);
        decorate();
    }

    public RoundedButton(Icon icon) {
        super(icon);
        decorate();
    }

    public RoundedButton(String text, Icon icon) {
        super(text, icon);
        decorate();
    }

    protected void decorate() {
        setBorderPainted(false);
        setOpaque(false);
    }
}


 decorate()라는 함수를 만들어 간단하게 처리했습니다. 이제 버튼 모양을 만들어봐야겠죠? 버튼의 모양은 해당 컴포넌트를 그리는 paintComponent 메소드를 오버라이드 하여 처리할 수 있습니다. 그러면 결과물처럼 만들 수 있도록 수정한 paintComponent 코드를 볼 수 있도록 하겠습니다.


@Override
protected void paintComponent(Graphics g) {
    int width = getWidth();
    int height = getHeight();

    Graphics2D graphics = (Graphics2D) g;

    graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    if (getModel().isArmed()) {
        graphics.setColor(getBackground().darker());
    } else if (getModel().isRollover()) {
        graphics.setColor(getBackground().brighter());
    } else {
        graphics.setColor(getBackground());
    }

    graphics.fillRoundRect(0, 0, width, height, 10, 10);

    FontMetrics fontMetrics = graphics.getFontMetrics();
    Rectangle stringBounds = fontMetrics.getStringBounds(this.getText(), graphics).getBounds();

    int textX = (width - stringBounds.width) / 2;
    int textY = (height - stringBounds.height) / 2 + fontMetrics.getAscent();

    graphics.setColor(getForeground());
    graphics.setFont(getFont());
    graphics.drawString(getText(), textX, textY);
    graphics.dispose();

    super.paintComponent(g);
}


 요 paintComponent 메소드를 클래스 안에 위치시키면 됩니다. 일단 한 줄씩 차례대로 살펴보도록 하겠습니다. widthheight는 편의를 위해 가져오도록 했고, graphics는 2D의 그래픽을 그릴 수 있도록 형 변환을 하여 가져왔습니다. setRenderingHint를 통해 배경의 사각형을 부드럽게 그릴 수 있도록 처리합니다.

 다음으로는 버튼에 마우스가 올려진 상태인지(isRollover()), 눌러진 상태인지(isArmed())와 기본적인 상태에 따라 배경의 색을 선택합니다. getBackground()를 통해 색을 가져와서 밝게, 또는 어둡게 처리했습니다. 그리고 난 후, fillRoundRect 메소드를 통해 가로, 세로 크기만큼 10의 둥글기를 가지게 하여 배경을 그립니다.

 다음부터는 버튼의 글자를 새길 차례입니다. FontMetricsRectangle를 통해 글자가 그려지는 사각형의 크기를 구합니다. 그런 이후 글자가 새겨질 위치를 구한 이후에 글자의 색(getForeground())과 폰트(getFont())를 가져와 drawString를 통해 그리면 됩니다. 이후에 graphicsdispose() 해주면 됩니다. 마지막 과정을 해주지 않을 경우엔 약간 조잡한 버튼의 모양이 되니 꼭 해주셔야 깔끔한 모양이 됩니다!


둥근 버튼 기본 상태

둥근 버튼 마우스 오버

둥근 버튼 클릭


 이렇게 테두리가 둥근 버튼을 만들어봤습니다. 응용하면 시작 부분과 끝 부분이 완전히 둥근도 만들 수 있습니다. 요런 글이 처음이라 시간도 오래 걸리고 글 퀄리티도 만족스럽지는 않네요. 버튼 색이 변하는 모습을 GIF로 만들어보고 싶었으나 이미 시간을 너무 많이 소비한 상태라 그냥 이미지로 첨부하는 점 양해 부탁드립니다. ㅠㅠ 다음에는 더 좋은 퀄리티의 글로 찾아뵐 수 있도록 할게요!

 오늘도 블로그 들러주셔서 감사합니다! 다음에도 또 들러주세요!

블로그 이미지

플린 N.

IT, 컴퓨터, 모바일 및 취미, 리뷰 블로그

댓글을 달아 주세요