정보처리기사 실기 공부, 직접 만든 쪽지시험 웹앱으로!

정보처리기사 실기 공부, 직접 만든 쪽지시험 웹앱으로!

2025. 6. 24. 14:38ㆍ개발/개발 필기

정보처리기사 실기 공부를 하다 보면 암기할 개념이 정말 많죠. 소프트웨어 공학, 디자인 패턴, SDLC, 알고리즘… 책만 붙잡고 있다 보면 어느새 집중력이 흐려질 때도 많고요.

그래서 저는 GPT와 함께 쪽지시험 웹앱을 직접 만들어 공부에 활용하고 있어요.

직접 문제를 만들고, 웹으로 테스트를 하다 보니 공부도 더 재밌고 오래 기억에 남습니다.

⚙️ 어떤 기술로 만들었을까?

HTML + CSS + JavaScript로 구성된 정적인 웹앱입니다.
반응형 디자인을 적용하여 모바일에서도 보기 쉽게 만들었습니다.
문제는 GPT의 도움을 받아 작성했고, 직접 책을 보며 추가하고 다듬었어요.
JavaScript로 문제를 배열에 저장하고, input으로 정답을 받아 정오답을 판별합니다.

🧠 공부가 되는 이유

직접 문제를 만들면서 개념을 정리하게 됩니다.
단순히 읽는 것이 아니라 능동적으로 상기하며 복습할 수 있어요.
언제 어디서든 웹으로 들어가 간편하게 학습할 수 있습니다.
GPT의 도움으로 빠르게 문제를 생성하고, 중복도 줄일 수 있었어요.

📌 앞으로 해보고 싶은 것

문제를 카테고리별로 나누기 (예: 소프트웨어공학, 네트워크, 알고리즘 등)
문제 랜덤 출제 기능 추가
정답률 기록 기능
로그인 없이 간단한 로컬 저장 기능

💬 마무리

정보처리기사 실기 시험, 쉽지 않지만 포기하지 않으면 반드시 합격할 수 있다고 믿습니다.
저처럼 스스로 문제를 만들거나, 웹 퀴즈를 만들어보는 것도 좋은 공부 방법이 될 수 있어요.
혹시 관심 있는 분들은 아래 링크에서 직접 풀어보시고, 피드백도 언제든 환영입니다!

📎 https://study.nickdeveloper.co.kr

함께 공부하시는 모든 분들, 진심으로 응원합니다! 💪✨

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>정보처리기사 실기 단답형 퀴즈</title>
  <style>
    *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  body {
    font-family: sans-serif;
    text-align: center;
    margin: 5vh 5vw;
  }

  .card {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 0 10px #eee;
  }

  input[type="text"] {
    width: 90%;
    padding: 12px;
    font-size: 1rem;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  button {
    padding: 10px 16px;
    margin: 5px;
    font-size: 1rem;
    cursor: pointer;
  }

  #result {
    margin-top: 15px;
    font-weight: bold;
  }

  /* 🔽 모바일 대응: 화면이 600px 이하일 때 스타일 조정 */
  @media screen and (max-width: 600px) {
    body {
      margin: 5vh 2vw;
    }

    .card {
      padding: 10px;
      width: 100%;
      box-shadow: none;
    }

    input[type="text"] {
      width: 90vw;
      font-size: 1rem;
    }

    button {
      width: 90vw;
      font-size: 1rem;
    }
  }
</style>
  <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/1055/1055684.png" type="image/png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="정보처리기사 실기 단답형 퀴즈로, 소프트웨어 공학과 디자인 패턴에 대한 문제를 제공합니다.">
  <meta name="keywords" content="정보처리기사, 실기, 단답형, 퀴즈, 소프트웨어 공학, 디자인 패턴">
</head>
<body>
  <div class="card">
    <h2>문제</h2>
    <div id="question">문제를 불러오는 중...</div>

    <input type="text" id="userInput" placeholder="정답을 입력하세요">
    <div>
      <button onclick="prevQuestion()">이전 문제</button>
      <button onclick="checkAnswer()">정답 확인</button>
      <button onclick="nextQuestion()">다음 문제</button>
    </div>

    <div id="result"></div>
  </div>

  <script>
    const quiz = [
      { q: "소프트웨어의 규모를 LOC 기반으로 예측하고, 소프트웨어 유형에 따라 비용을 산정하는 공식을 적용하는 비용을 산정하는 모델은?", a: "COCOMO" },
      { q: "조직형, O만 라인 이하의 일반 업무용 소프트웨어 개발 프로젝트", a: "5만 라인 이하" },
      { q: "반분리형 OO만 라인 이하의 운영체제나 DBMS 같은 소프트웨어 개발 프로젝트", a: "30만 라인 이하" },
      { q: "TCP와 UDP 중 연결지향적인 프로토콜은?", a: "TCP" },
      { q: "내방형, OO만 라인 이상의 미사일 유도 시스템, 신호기 제어 시스템 같은 대규모 복잡 소프트웨어 개발 프로젝트", a: "30만 라인 이상" },
      { q: "프로젝트 핵심 관리 대상 3P", a: "사람, 문제, 프로세스" },
      { q: "신속하고 반복적인 작업을 통해 지속적으로 작동 가능한 소프트웨어를 개발하는 방식", a: "애자일" },
      { q: "XP 5가지 핵심", a: "용기, 존중, 의사소통, 피드백, 단순성" },
      { q: "폭포수 모델과 프로토타이핑 모델의 장점을 결합하고, 위험 분석을 추가하여 점진적으로 개발하는 모델", a: "나선형 모델" },
      { q: "나선형 모델의 순서", a: "계획 및 요구 분석, 위험 분석, 프로토타입, 고객 평가 및 피드백" },
      { q: "객체의 세부 구현을 숨기고 인터페이스만 제공하여 내부 구현을 보호한다", a: "캡슐화" },
      { q: "객체 내부의 세부 사항을 외부로부터 숨김으로써 안정성을 높인다", a: "정보 은닉" },
      { q: "재사용과 확장성을 위해 상위 클래스의 속성과 메서드를 하위 클래스가 상속한다", a: "상속" },
      { q: "하나의 인터페이스가 다양한 형태의 구현을 가질 수 있어 유연한 프로그래밍이 가능하다", a: "다형성" },
      { q: "복잡한 현실 세계를 단순화하여 필요한 부분만을 모델링한다", a: "추상화" },
      { q: "소프트웨어 개발 단계", a: "계획, 요구사항 분석, 설계, 구현, 테스트, 유지보수" },
      { q: "소프트웨어 공학의 3R", a: "역공학, 재공학, 재사용" },
      { q: "정렬 알고리즘 중 평균 시간 복잡도가 가장 빠른 알고리즘은?", a: "퀵 정렬" },
      { q: "시스템 개발 생명주기(SDLC)의 첫 번째 단계는?", a: "요구사항 분석" },
      { q: "데이터 흐름도(DFD)에서 처리 과정을 나타내는 기호는?", a: "원" },
      { q: "교착상태 발생 조건 중 자원을 점유한 채 다른 자원을 기다리는 상태는?", a: "상호 대기" },
      { q: "비대칭키 암호화 방식 중 대표적인 알고리즘은?", a: "RSA" },
      { q: "객체를 1개만 생성하고 공유하는 디자인 패턴은?", a: "Singleton" },
      { q: "객체 생성을 서브 클래스에 위임하는 디자인 패턴은?", a: "Factory Method" },
      { q: "관찰자에게 상태 변경을 통지하는 디자인 패턴은?", a: "Observer" },
      { q: "행동 알고리즘을 런타임에 교체할 수 있게 하는 디자인 패턴은?", a: "Strategy" },
      { q: "알고리즘의 틀을 상위 클래스가 정의하고 하위 클래스가 구체화하는 디자인 패턴은?", a: "Template Method" },
      { q: "관련 객체를 집합으로 생성하는 디자인 패턴은?", a: "Abstract Factory" },
      { q: "복잡한 객체 생성 절차를 분리하는 디자인 패턴은?", a: "Builder" },
      { q: "기존 객체를 복제하여 사용하는 디자인 패턴은?", a: "Prototype" },
      { q: "호환되지 않는 인터페이스를 연결하는 디자인 패턴은?", a: "Adapter" },
      { q: "트리 구조로 구성 요소를 조합하는 디자인 패턴은?", a: "Composite" },
      { q: "기존 객체에 기능을 덧붙이는 디자인 패턴은?", a: "Decorator" },
      { q: "복잡한 서브시스템에 단순한 인터페이스를 제공하는 디자인 패턴은?", a: "Facade" },
      { q: "객체에 대한 대리자를 제공하는 디자인 패턴은?", a: "Proxy" },
      { q: "요청을 객체로 캡슐화하는 디자인 패턴은?", a: "Command" },
      { q: "상태에 따라 동작이 바뀌는 디자인 패턴은?", a: "State" },
      { q: "GoF 디자인 패턴의 저자 중 한 명으로, G으로 시작하는 이름은?", a: "Erich Gamma" },
      { q: "GoF 디자인 패턴 공동 저자 중 H로 시작하는 이름은?", a: "Richard Helm" },
      { q: "GoF 디자인 패턴 공동 저자 중 J로 시작하는 이름은?", a: "John Vlissides" },
      { q: "GoF 디자인 패턴 공동 저자 중 J가 아닌 이름은?", a: "Ralph Johnson" },
      { q: "디자인 패턴 책 \"Design Patterns\"을 집필한 4인의 별칭은?", a: "GoF" },
      { q: "객체 관계도 사각형", a: "객체" },
      { q: "객체 관계도 마름모", a: "관계" },
      { q: "객체 관계도 타원", a: "속성" },
      { q: "객체 관계도 밑줄 타원", a: "기본키 속성" },
      { q: "객체 관계도 이중 타원", a: "복합 속성" },
      { q: "객체 관계도 선 링크", a: "객체와 속성 연결" },

    ];

    let current = 0;

    function showQuestion() {
      document.getElementById("question").innerText = quiz[current].q;
      document.getElementById("userInput").value = "";
      document.getElementById("result").innerText = "";
    }

    function checkAnswer() {
      const userAnswer = document.getElementById("userInput").value.trim();
      const correctAnswer = quiz[current].a.trim();

      if (normalize(userAnswer) === normalize(correctAnswer)) {
        document.getElementById("result").innerHTML = "✅ 정답입니다!";
      } else {
        document.getElementById("result").innerHTML = `❌ 오답입니다. <br>정답: ${correctAnswer}`;
      }
    }

    function normalize(str) {
      return str.replace(/\s+/g, "").toLowerCase();
    }

    function nextQuestion() {
      current = (current + 1) % quiz.length;
      showQuestion();
    }
   function prevQuestion() {
      current = (current - 1 + quiz.length) % quiz.length;
      showQuestion();
    }
    window.onload = showQuestion;
  </script>
</body>
</html>

제발 학격하자!!

저작자표시 비영리 동일조건 (새창열림)

'개발 > 개발 필기' 카테고리의 다른 글

재부팅 시 PM2 프로세스 자동 재실행 설정 (0)	2025.05.09
가비아 네입서버 연결 후 카페24 도메인 관리 (4)	2025.04.14
Git Push 오류 해결하기: non-fast-forward와 그 해결책 (0)	2025.03.19
Next.js의 useParams 및 useSearchParams 사용법 (0)	2025.03.12
웹 페이지 캐시 문제 해결하기 (1)	2025.03.06

nicksoon