충남대학교_모각코_냠냠

1/4

1/11

1/18

1/27

2/5

2/14

<활동 목표>

단어 암기 게임 구현

 - 산성비 게임과 단어 맞추기 게임을 접목시킨 간단한 미니게임

<활동 내역>

다음과 같이 산성비 게임을 단어 게임 버전으로 만들었다.

게임 시작 버튼을 누르면 영어 단어가 내려오고, 그 뜻을 상단의 박스 안에 알맞게 입력하면 단어가 사라진다.

만약 단어가 사라지지 못하고 끝까지 내려와 바닥에 닿으면 Game Over 창이 뜨며 점수가 나타나게 된다.

단어장에 추가한 단어들이 나타나도록 하였다.

    private java.util.List<FallingWord> fallingWords=new java.util.ArrayList<>();
    
    .
    .
    .

	FallingWord(String word,String meaning,int x){
            this.word=word;
            this.meaning=meaning;
            this.x=x;
            this.y=0;
        }

떨어지는 단어들에 대한 List를 만들고,

        if(Math.random()<0.02){
            if(frame.wordList.size()>0){
                TodoList.WordEntry entry=frame.wordList.get((int)(Math.random()*frame.wordList.size()));
                fallingWords.add(new FallingWord(entry.word,entry.meaning,(int)(Math.random()*300)));
            }
        }

Math.random을 통해 랜덤으로 단어가 내려오도록 하였다.

<느낀점&배운점>

평소에 백준을 풀면서 Math를 사용한 적이 종종 있었는데, random을 이렇게 활용하게 되어 감회가 새로웠다.

전반적으로 필요한 기능들 구현은 완료했지만 완성도 면에서 조금 아쉬워서

시간이 된다면 더 수정과정을 거쳐 정말 필요하고 사용하고 싶은 결과물을 만들고 싶다.

<활동 목표>

간단한 단어장 구현하기

- 원하는 단어를 추가할 수 있는 창 구현하기

- 중요한 단어를 북마크 할 수 있는 기능 구현하기

<활동 내역>

하단 네모에 단어를 추가한 후 ADD 버튼을 누르면 단어가 추가된다.

처음 UI에 단어장 버튼을 만들지 않았기에 필요에 따라 상단 버튼을 추가했다.

        starBtn = new JButton("★");
        starBtn.setFont(new Font("Dialog", Font.PLAIN, 20));
        starBtn.setBorderPainted(false);
        starBtn.setContentAreaFilled(false);
        starBtn.setForeground(Color.GRAY);

별을 눌러 북마크를 했을 때, 노란색으로 채워지면 좋겠다는 생각을 했다.

원래는 가운데가 빈 별을 사용했는데, 안이 회색으로 채워진 별의 색을 바꾸는 것으로 수정했다.

코드로는 이벤트 ActionListener를 사용해 별의 색을 Toggle하였다.

따로 별을 Toggle하는 메소드를 추가하여 코드가 복잡해지지 않도록 작성하였다.

<느낀점&배운점>

TodoList 화면을 구현할 때와 비슷할 것이라 생각했고 실제로도 전반적으로 비슷한 것 같다.

하나하나 기능이 추가되면서 완성되어 가는 과정이 참 재밌다고 생각했다.

<활동 목표>

성취도 시각화 구현하기

<활동 내역>

실제 포도알 스티커를 붙이는 듯, 보라색 원을 원하는 추가하도록 하였는데

생각보다 너무 안 예뻐서 포도 이모지를 첨부하도록 하였다.

// GRAPE PANEL
class GrapePanel extends JPanel {

    private JPanel grapeContainer;

    public GrapePanel(TodoList frame) {

        setLayout(new BorderLayout());

        JPanel navBar = frame.createNavBar("Look! What a perfect Grape!");
        add(navBar, BorderLayout.NORTH);

        grapeContainer = new JPanel();
        grapeContainer.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 10));
        grapeContainer.setBackground(Color.WHITE);

        JScrollPane scroll = new JScrollPane(grapeContainer);
        scroll.setBorder(null);

        add(scroll, BorderLayout.CENTER);

    }

    public void addGrape() {

        JLabel grape = new JLabel("🍇");
        grape.setFont(new Font("Segoe UI Emoji", Font.PLAIN, 32));
        
        grapeContainer.add(grape);
        grapeContainer.revalidate();
        grapeContainer.repaint();
    }
}

다음과 같이 포도가 하나씩 추가되는 코드를 작성했다.

Todo Panel에 있는 코드에 Grape를 연결지어 완료된 일이 있으면 포도가 하나씩 추가되도록 연결했다.

<느낀점&배운점>

시각적으로 예쁜 UI를 만든다는 것이 생각보다 어려운 것 같다.

이런 저런 시도를 해보고 예쁨을 택한다면 기능적으로 부족해보여 아쉽고 생각할 거리가 많아진다.

추후에 포도를 어떻게 나타내야 성취감을 더 느끼면서도 시각적으로 예쁜 화면을 만들 수 있을지 고민해봐야겠다.

<활동 목표>

Todo List 화면 구현

 - 학기 중 배운 내용 참고

성취도 시각화 관련 코드 구상

<활동 내역>

    private void addItem() {
        String text = inputTextField.getText().trim();
        if(text.isEmpty()) return;
        ToDoItem item = new ToDoItem(text);
        items.add(item);
        centerPanel.add(item);
        inputTextField.setText("");
        centerPanel.revalidate();
        centerPanel.repaint();
    }

학기 중의 수업에서는 일의 우선 순위를 정하여 할 일을 등록할 수 있었고 겹치는 할 일이 있으면 뜨지 않도록 하였으나,

실사용자의 특성상 겹치는 일을 등록할 일이 적을 것 같고 우선 순위 기능이 있어도 사용 빈도가 낮을 것으로 예상되어 그 부분은 빼고 참고하였다.

            checkBox.addActionListener(e -> {
                if(checkBox.isSelected())
                    textLabel.setForeground(Color.GRAY);
                else
                    textLabel.setForeground(Color.BLACK);
            });

이런 식으로 완료한 일의 체크박스를 누르면 글자가 회색으로 변하여 끝낸 일과 아닌 일을 더 보기 쉽게 만들었다.

단어를 추가하고, 체크 표시를 하여 완료한 일을 알 수 있게 한다.

나중에 FINISH! 버튼을 누르면 체크된 일들이 한번에 없어지는 것을 볼 수 있다.

성취도 시각화를 위해서는 슬라이드나 포도알 스티커 채우기와 같이 눈에 보이는 차이가 있어야 한다고 생각했다.

동글동글한 포도알을 여러개 만들어 놓고 TodoList에 있는 체크 박스를 누를 때마다 포도알을 채울 수 있는 수가 늘어나면 좋을 것 같으나, 구현 가능 범위 및 구현했을 때의 UI를 보고 수정하게 될 수 있다고 보았다.

<느낀점&배운점>

오랜만에 해보니까 기억이 가물가물했다.

그래도 과제로 했던 코드들을 다시 보고 기억을 되짚어보며 필요한 부분들을 하나하나 채워가니 뭐라도 만들어지는 듯 하다.

또한, 큰 의미는 없더라도 UI와 관련되어서 더 예쁜 UI를 만들고 싶어 고심하는 과정이 은근 재밌는 것 같다.

<활동 목표>

UI 구상하기

 - 정말 필요한 기능이 무엇일지 생각하기

Panel 및 Layout 등 기본적인 틀을 이루는 UI 구현하기

<활동 내역>

위 사진과 같이 UI를 간략하게 구상한 후, Java의 swing을 통해 UI의 기본적인 틀을 구현했다.

원래는 CardLayout을 사용하여 우측 상단의 버튼을 누르면 창이 다음 카드로 전환되는 방식을 생각했는데,

Navigation Bar를 이용하면 순서대로 원하는 창이 나올 때까지 버튼을 누르는 것이 아니라 원하는 버튼을 누르면 바로 이동되는 것을 구현할 수 있기에 네비게이션 바를 사용하여 구현하였다.

크기는 400*600으로 굳이 창이 너무 클 필요는 없기에 적당히 작은 크기로 하였고 각각 버튼을 눌렀을 때 나오는 세부적인 화면은 추후 활동에서 구현 예정이다.

        todoBtn.setBorderPainted(false);
        todoBtn.setContentAreaFilled(false);

AI의 도움을 받아 UI를 다듬는 과정에서 버튼의 테두리를 없애어 시각적으로 더 예쁜 버튼을 만들 수 있는 코드를 배웠다.

버튼의 기본 색과 테두리가 없어지니 한층 깔끔해졌다.

<느낀점&배운점>

생각보다 Java swing의 UI도 깔끔한 디자인이 나올 수 있구나 싶어졌다.

오랜만에 학기 중에 배웠던 코드들을 참고하여 UI를 만들어보니 복습 과정에서 새로운 것들을 더 알게 되어 재밌었다.

덕분에 수업 시간에 배운 것 외에도 swing에는 정말 다양한 것들이 있음을 알게 되었다.

<활동목표>

앞으로의 활동 목표 정하기

 - 앱(또는 웹)을 구현할 때 참고하면 좋을 정보 알아보기

CP2복습 활동하기(TodoList 활동 위주로)

<활동 내역>

앞으로의 활동 목표 정하기

2025 동계 모각코 활동 주제: 간단한 단어 암기 및 todo에 대한 성취율 시각화를 통한 공부 지원 앱 또는 웹 만들기

- 지난 1학년 동안 배운 Java 언어를 사용하여 공부를 하고자하는 의지를 높이는 간단한 앱 또는 웹을 개발할 예정

- 현재 과외중인 학생이 본인의 실력 부족에 대한 짜증 때문에 공부를 하기 어려워하고, 영어 단어를 외워본 경험이 적어 단어를 외우는데 어려움을 겪고 있다. 이에 도움을 주기 위해 숙제를 잘 해내거나 사용자 수준보다 더 높은 난이도의 문제를 해결했을 때 칭찬 스티커와 같은 보상을 주고 날마다의 성취가 시각화되어 보여지게 하여 성장하는 모습을 보여주고, 잘 외워지지 않는 단어를 잘 외울 수 있도록 간단한 단어장 기능을 넣어 접근성 높은 앱 또는 웹을 지원하고자 함.

1회차 목표:

그동안 배운 Java에 대한 지식들을 정리하고 수업시간에 활동한 것 중 가장 유사한 기능을 가진 코드들 복습하기, 활동 목표 정하기

2회차 목표:

전반적인 UI 구상, Panel과 Layout 등 기본적인 틀을 이루는 UI를 구현하고 정말 필요한 기능이 무엇일지 생각하기

3회차 목표:

Todo 코드를 참고하여 Todo List를 만들고 성취도 시각화와 관련된 코드 구상, 필요한 내용이 있다면 추가적으로 공부하기

4회차 목표:

성취도 시각화(ex: 칭찬 스티커, 그래프 등)

5회차 목표:

단어를 추가하고 삭제하며 잘 외워지지 않는 단어를 북마크 할 수 있는 기능 구현하기

6회차 목표:

단어 암기에 도움을 주는 간단한 게임(행맨 게임 등) 구현하고 jar파일을 만들어 exe, app 파일로 변환 후 학생에게 배포하기

+단어 암기를 할 때에는 많은 단어를 한꺼번에 외우기 보다는 5~7씩 적은 단위로 조금조금 외워가는 것이 부담은 적고 암기에는 더 효율적이다. 이를 활용하여 5~7개의 모르는 단어를 반복적으로 볼 수 있는 것을 구현하여도 될 듯 하다.

<운영 계획>

팀명: 냠냠

팀블로그: https://chosh.tistory.com

개인블로그
변정은(조장): https://quswjddms.tistory.com/
이지희: https://note02186.tistory.com
조서희: https://chosh.tistory.com

김수현: https://m.blog.naver.com/susuhy_

<활동 일정>

1회차: 1월 4일(토) 19:00~22:00 - 

2회차: 1월 11일(일) 19:00~22:00 - 

3회차: 1월 18일(일) 19:00~22:00 - 

4회차: 1월 27일(화) 19:00~22:00 - 

5회차: 2월 5일(목) 19:00~22:00 - 

6회차: 2월 14일(토)  19:00~22:00 - 

*방학 기간 중 본가에 내려간 팀원을 고려하여 전 회차 온라인 활동으로 진행(디스코드 활용 예정)

<목표>

https://quswjddms.tistory.com/17

<결과>

https://quswjddms.tistory.com/18