Colin's Blog
[javascript] Grunt를 통해 웹페이지의 레이아웃을 자동으로 생성하고 반응형 디자인을 적용하는 방법은 무엇인가요?

Grunt는 JavaScript 기반의 태스크 러너로, 자동화된 작업을 수행하기 위해 많이 사용됩니다. 이번 포스트에서는 Grunt를 이용하여 웹페이지의 레이아웃을 자동으로 생성하고 반응형 디자인을 적용하는 방법을 알아보겠습니다.

1. Grunt 설치하기

Grunt를 사용하기 위해선 먼저 Node.js를 설치해야 합니다. Node.js를 설치한 후, 커맨드 라인에서 다음 명령어를 입력하여 Grunt CLI(Command Line Interface)를 전역으로 설치합니다:

npm install -g grunt-cli

2. 프로젝트 폴더 생성 및 Grunt 초기화

작업을 진행할 프로젝트 폴더를 생성한 후, 해당 폴더에서 커맨드 라인을 실행합니다. 다음 명령어를 입력하여 Grunt를 초기화합니다:

npm init

이후에는 해당 폴더에 package.json 파일이 생성되며, Grunt 관련 패키지를 설치하기 위한 단계입니다.

3. Grunt 플러그인 설치

Grunt를 사용하여 레이아웃을 생성하고 반응형 디자인을 적용하기 위해서는 몇 가지 유용한 Grunt 플러그인을 설치해야 합니다. 여기서는 다음과 같은 플러그인을 사용합니다:

다음 명령어를 통해 각각의 Grunt 플러그인을 설치합니다:

npm install grunt-contrib-clean grunt-contrib-copy grunt-contrib-sass grunt-autoprefixer grunt-contrib-watch --save-dev

4. Grunt 설정 파일 작성

프로젝트 폴더에 Gruntfile.js (자바스크립트 파일)을 생성하고 다음과 같이 작성합니다:

module.exports = function(grunt) {

  grunt.initConfig({

    // 설정 옵션

    clean: {
      build: ['dist/*']
    },

    copy: {
      html: {
        src: 'src/index.html',
        dest: 'dist/index.html'
      }
    },

    sass: {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          'dist/css/style.css': 'src/scss/style.scss'
        }
      }
    },

    autoprefixer: {
      options: {
        browsers: ['last 2 versions', 'ie 8', 'ie 9']
      },
      dist: {
        src: 'dist/css/style.css',
        dest: 'dist/css/style.css'
      }
    },

    watch: {
      options: {
        livereload: true
      },
      html: {
        files: ['src/index.html'],
        tasks: ['copy:html']
      },
      sass: {
        files: ['src/scss/**/*.scss'],
        tasks: ['sass', 'autoprefixer']
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['clean', 'copy', 'sass', 'autoprefixer']);

};

5. 작업 수행

위의 설정 파일을 작성한 후, 커맨드 라인에서 다음 명령어를 입력하여 작업을 수행합니다:

grunt

위 명령어를 실행하면 Grunt가 설정에 따라 src 폴더의 파일을 dist 폴더로 복사하고, SASS 파일을 CSS로 변환한 뒤 자동으로 벤더 프리픽스를 추가합니다. 이후 watch 태스크를 수행하여 파일 변경을 감지하고, 변경이 발생하면 해당 파일들을 다시 빌드하여 자동으로 반영하는 동작을 수행합니다. 반응형 디자인을 적용하기 위해선 작성한 SASS 파일에서 @media 쿼리를 사용하여 화면 크기에 따라 스타일을 변경하면 됩니다.

위의 단계를 모두 마쳤다면, 웹페이지의 레이아웃을 자동으로 생성하고 반응형 디자인을 적용하는 Grunt 태스크를 성공적으로 구성하였습니다.

참고 자료:

© 2018 Colin. All rights reserved.