먼저 4채널 릴레이 1, 2, 3, 4를 아두이노 디지털 핀 D4, D5, D6, D7로 설정한다.
// 릴레이 핀 정의
int relay1 = 4;
int relay2 = 5;
int relay3 = 6;
int relay4 = 7;
직렬 통신은 9600으로 설정하고, LCD1602 디스플레이를 초기화 한다음, 백라이트를 ON 상태로 설정한다.
다음 릴레이 핀모드를 출력으로 정하고, 릴레이 초기 상태를 LOW(꺼짐)으로 설정한다.
void setup() {
Serial.begin(9600);
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
// 릴레이 핀을 출력으로 설정
pinMode(relay1, OUTPUT);
pinMode(relay2, OUTPUT);
pinMode(relay3, OUTPUT);
pinMode(relay4, OUTPUT);
// 릴레이 초기 상태 설정 (LOW 상태는 OFF)
digitalWrite(relay1, LOW);
digitalWrite(relay2, LOW);
digitalWrite(relay3, LOW);
digitalWrite(relay4, LOW);
}
void loop 함수에서는 릴레이 1번부터 4번까지 3초 간격으로 켜졌다 꺼졌다 하는 방식으로 순차적으로 순환하도록 하였다. LCD1602 디스플레이는 각 채널에 연결된 LED 다이오드의 색상에 따라 빨간색이면 LED : R, 파란색이면 LED : B, 노란색이면 LED : Y, 초록색이면 LED : G로 디스플레이에 현시되도록 하였다.
#include <LiquidCrystal_I2C.h>
int sensorPin = A0; // LDR 연결 핀
int ledPin = 9; // LED 연결 핀
int dogPin = 3;
int threshold = 750; // 임계값 (0~1023 범위)
먼저 LCD1602 라이브러리를 설치하고 변수 sensorPin, ledPin, dogPin, threshold 를 선언한다.
여기서 threshold 변수의 임계 값이 750을 넘으면 아두이노에 연결된 LED와 소리모듈을 제어할 수 있다.
LiquidCrystal_I2C lcd (0x27,16,2); // LCD1602 hexa값, 2행 16열 설정
LCD 1602는 16행 2열로 설정한다.
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
pinMode(ledPin, OUTPUT); // LED 핀을 출력 모드로 설정
pinMode(dogPin, OUTPUT); // dog 핀을 출력 모드로 설정
Serial.begin(9600); // 시리얼 통신 시작
}
LCD 모듈을 초기화하고, 백라이트를 켜준다.
ledPin, dogPin을 출력모드로 설정하고, 시리얼 통신은 9600으로 시작한다.
void loop() {
int sensorValue = analogRead(sensorPin); // LDR에서 아날로그 값 읽기
Serial.println(sensorValue); // 시리얼 모니터에 값 출력
// 밝기가 임계값 이하이면 LED 켜기
if (sensorValue > threshold) {
digitalWrite(ledPin, HIGH);
digitalWrite(dogPin, HIGH);
lcd.setCursor(0,0);
lcd.print("LED : ON");
lcd.setCursor(0,1);
lcd.println(sensorValue);
} else { // 밝기가 임계값 이상이면 LED 끄기
digitalWrite(ledPin, LOW);
digitalWrite(dogPin, LOW);
lcd.setCursor(0,0);
lcd.print("LED : OFF");
lcd.setCursor(0,1);
lcd.println(sensorValue);
}
sensorValue 변수로 sensorPin의 아날로그 값을 읽어드리고, sensorValue 값에 따라 아두이노에 연결된 모듈을 제어한다.
전체 코드 :
#include <LiquidCrystal_I2C.h>
int sensorPin = A0; // LDR 연결 핀
int ledPin = 9; // LED 연결 핀
int dogPin = 3;
int threshold = 750; // 임계값 (0~1023 범위)
LiquidCrystal_I2C lcd (0x27,16,2); // LCD1602 hexa값, 2행 16열 설정
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
pinMode(ledPin, OUTPUT); // LED 핀을 출력 모드로 설정
pinMode(dogPin, OUTPUT); // dog 핀을 출력 모드로 설정
Serial.begin(9600); // 시리얼 통신 시작
}
void loop() {
int sensorValue = analogRead(sensorPin); // LDR에서 아날로그 값 읽기
Serial.println(sensorValue); // 시리얼 모니터에 값 출력
// 밝기가 임계값 이하이면 LED 켜기
if (sensorValue > threshold) {
digitalWrite(ledPin, HIGH);
digitalWrite(dogPin, HIGH);
lcd.setCursor(0,0);
lcd.print("LED : ON");
lcd.setCursor(0,1);
lcd.println(sensorValue);
} else { // 밝기가 임계값 이상이면 LED 끄기
digitalWrite(ledPin, LOW);
digitalWrite(dogPin, LOW);
lcd.setCursor(0,0);
lcd.print("LED : OFF");
lcd.setCursor(0,1);
lcd.println(sensorValue);
}
delay(100); // 100ms 대기 (출력 속도 조절)
lcd.clear();
}
HC-SR501센서의 신호(S)는 아두이노 D8번에 연결하고, LED 다이오드 + 핀은 D4번, LCD1602 SDA는 아두이노의 아날로그 출력핀 A4, SCL은 A5에 연결한다.
아두이노 우노 R3
HC-SR 501
LED 다이오드
LCD 1602
+5V
VCC
VCC
GND
GND
-핀
GND
D8
S
D4
+핀
A4
SDA
A5
SCL
아래 그림은 실물 회로 연결한 모습이다.
HC-SR501 센서감지 실물 회로도
회로 연결이 전부 마치면 아두이노 IDE에 다음과 같이 코드를 작성한다.
먼저 LCD1602 디스플레이 라이브러리를 설치하여 준다.
#include <LiquidCrystal_I2C.h>
감지센서의 신호 출력을 변수 pirPin으로 아두이노 D8번으로 선언하여 주고, LED 다이오드는 D4번으로 선언하여 준다.
int pirPin = 8; // PIR 센서의 출력 핀
int ledPin = 4; // 내장 LED 핀 (동작 감지 시 켜짐)
LCD1602를 초기화 하여주고, 백라이트를 켜준다.
핀모드에서 HC-SR501 센서는 입력 모드로, LED 다이오드는 출력 모드로 선언하여 주고 시리얼 통신은 9600으로 설정한다.
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
pinMode(pirPin, INPUT); // PIR 핀을 입력으로 설정
pinMode(ledPin, OUTPUT); // LED 핀을 출력으로 설정
Serial.begin(9600); // 시리얼 통신 시작
}
다음은 센서 변수 pirState는 디지털 읽기로 선언하여 준다.
pirState 가 HIGH일 때 LED 핀 (ledPin)은 HIGH 상태로 LED 다이오드를 켜주고, 동시에 LCD1602에 "Motion Detected!"라는 문자를 출력하여 준다.
pirState가 LOW일 때는 LED 다이오드는 꺼준다.
void loop() {
int pirState = digitalRead(pirPin); // PIR 센서의 상태 읽기
if (pirState == HIGH) {
digitalWrite(ledPin, HIGH); // 동작 감지 시 LED 켜기
Serial.println("Motion Detected!");
lcd.setCursor(0,0); // LCD 1행 2열에 출력
lcd.print("Motion Detected");
} else {
digitalWrite(ledPin, LOW); // 동작이 없을 시 LED 끄기
Serial.println("Motion no Detected!");
lcd.setCursor(0,0); // LCD 1행 2열에 출력
lcd.print("Motion no Detected");
}
코드 작성이 전부 끝나면 아두이노 IDE에 아두이노 우노 R3 을 USB케이블로 연결하고(보드와 포트를 설정), 작성된 코드를 컴파일하여 업로드 하여 준다.
전체 코드 :
#include <LiquidCrystal_I2C.h>
int pirPin = 8; // PIR 센서의 출력 핀
int ledPin = 4; // 내장 LED 핀 (동작 감지 시 켜짐)
LiquidCrystal_I2C lcd (0x27,16,2); // LCD1602 hexa값, 2행 16열 설정
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
pinMode(pirPin, INPUT); // PIR 핀을 입력으로 설정
pinMode(ledPin, OUTPUT); // LED 핀을 출력으로 설정
Serial.begin(9600); // 시리얼 통신 시작
}
void loop() {
int pirState = digitalRead(pirPin); // PIR 센서의 상태 읽기
if (pirState == HIGH) {
digitalWrite(ledPin, HIGH); // 동작 감지 시 LED 켜기
Serial.println("Motion Detected!");
lcd.setCursor(0,0); // LCD 1행 2열에 출력
lcd.print("Motion Detected");
} else {
digitalWrite(ledPin, LOW); // 동작이 없을 시 LED 끄기
Serial.println("Motion no Detected!");
lcd.setCursor(0,0); // LCD 1행 2열에 출력
lcd.print("Motion no Detected");
}
delay(100); // 짧은 지연 (100ms)
lcd.clear(); // LCD 클리어
}
인체감지 센서 HC-SR501에 모션이 감지되었을 때 LED 다이오드가 켜지는 모습을 볼 수 있다.
조이스틱 모듈은 아두이노나 라즈베리 파이와 같은 마이크로컨트롤러와 같이 단일 보드 컴퓨터에 사용하여 입력 장치로 활용할 수 있다. 일반적으로 조이스틱 모듈은 두 개의 아날로그 축(X, Y)과 하나의 디지털 버튼으로 구성되어 있다.
조이스틱 모듈 핀 기능 :
+ 5V
VCC (전원 5V)
GND
GND (접지 -)
VRx
X축 아날로그 출력
VRy
Y축 아날로그 출력
SW
버튼 디지털 출력
실습 예제 :
조이스틱 모듈의 방향에 따라 LED 다이오드를 제어하는 방법을 설명하겠다.
예들 들어 조이스틱을 위로 움직일 때는 빨간색 LED가 켜지고, 아래로 움직일 때는 파란색 LED를, 왼쪽으로 움직일 때는 녹색 LED, 오른쪽으로 움직일 때는 노란색 LED를 켜지는 식으로 구현하였다. 그리고 조이스틱 버튼이 눌리었을 때는 4개의 LED가 전부 켜지도록 하였다.
필요한 부품 :
구성품으로는 아두이노 우노 R3, 조이스틱 모듈, LED 다이오드 4개 (빨간색, 파란색, 녹색, 노란색), 저항 4개(220Ω) 등이 쓰인다.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
2. 직렬 통신 : UART TTL 직렬 인터페이스를 통해 마이크로컨트롤러에 쉽게 통신할 수 있다.
3. TF 카드 지원 : 최대 32GB의 Micro TF 카드를 지원하여 대용량의 오디오 파일을 저장하고 재생할 수 있다.
4. 내장형 오디오 디코더 : 내장된 오디오 디코더를 사용하여 오디오 파일을 고음질로 재생할 수 있다.
5. 다양한 재생 제어 : 재생, 일시정지, 정지, 다음트랙, 이전트랙, 볼륨_UP, 볼륨_DOWN, 등의 명령을 통해 오디오 재생을 제어할 수 있다.
6. 스피커 연결 : 모듈에 직접 스피커를 연결할 수 있는 단자를 제공하여 외부 앰프 없이도 오디오 출력을 제공한다.
실습 예제 :
YX5300 UART TTL 직렬 MP3 음악 플레이어 모듈을 아두이노와 함께 사용하여 MP3 플레이어를 만들어 보겠다.
구성품으로는 YX5300 MP3 플레이어 모듈, 아두이노 우노 R3, 0.91인치 128X32pixel 디스플레이 모듈, 푸시버튼 등이 사용된다.
구성품 :
YX5300 MP3 모듈
아두이노 우노 R3
0.91인치 OLED 모듈
푸시버튼
회로도 :
mp3 플레이어 회로도
mp3 플레이어 실물
위와 같이 회로를 연결하고 다음과 같이 코딩을 작성한다.
코딩 설명으로는 먼저 OLED와 YX5300 모듈을 위해 라이브러리를 설치해주어야 한다.
OLED 디스플레이 라이브러리 : Adafruit SSD1306, Adafruit GFX Library
YX5300 mp3 모듈 라이브러리 : DFRobotDFPlayerMini
I2C 통신을 위해 Wire 라이브러리를 포함한다.
#include <Wire.h>: I2C
다음 디스플레이 너비 : 128, 높이 : 32로 정의하여 준다.
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 32
YX5300 mp3 모듈의 TX, RX를 디지털핀 D2, D3번으로 설정한다.
버튼설정 : 플레이/정지, 다음, 이전, 볼륨+, 볼륨-, 전원 ON/OFF 버튼을 디지털핀 D4, D5, D6, D7, D8, D9 순서대로 설정하여 준다.
// 버튼 핀 설정
const int playPauseButtonPin = 4;
const int nextButtonPin = 5;
const int prevButtonPin = 6;
const int volumeUpButtonPin = 7;
const int volumeDownButtonPin = 8;
const int powerButtonPin = 9;
초기 볼륨을 0~30 중 10으로, 트랙은 1번으로 변수 volume, trackNumber로 정의하여 준다.
int volume = 10; // 초기 볼륨 (0-30)
int trackNumber = 1; // 재생할 트랙 번호
if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(SSD1306_WHITE);
전원 버튼 설정 :
if (digitalRead(powerButtonPin) == LOW) {
delay(50); // 디바운스
if (digitalRead(powerButtonPin) == LOW) {
powerOn = !powerOn;
if (powerOn) {
myDFPlayer.start();
isPlaying = true;
Serial.println(F("Power ON"));
} else {
myDFPlayer.pause();
isPlaying = false;
Serial.println(F("Power OFF"));
}
updateDisplay();
while (digitalRead(powerButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
재생/ 정지 버튼 설정 :
if (digitalRead(playPauseButtonPin) == LOW && powerOn) {
delay(50); // 디바운스
if (digitalRead(playPauseButtonPin) == LOW) {
if (isPlaying) {
myDFPlayer.pause();
Serial.println(F("Paused"));
} else {
myDFPlayer.start();
Serial.println(F("Playing"));
}
isPlaying = !isPlaying;
updateDisplay();
while (digitalRead(playPauseButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
다음곡 버튼 설정 :
if (digitalRead(nextButtonPin) == LOW && powerOn) {
delay(50); // 디바운스
if (digitalRead(nextButtonPin) == LOW) {
myDFPlayer.next();
trackNumber++;
Serial.print(F("Next track: "));
Serial.println(trackNumber);
updateDisplay();
while (digitalRead(nextButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
이전곡 버튼 설정 :
if (digitalRead(prevButtonPin) == LOW && powerOn) {
delay(50); // 디바운스
if (digitalRead(prevButtonPin) == LOW) {
myDFPlayer.previous();
if (trackNumber > 1) trackNumber--;
Serial.print(F("Previous track: "));
Serial.println(trackNumber);
updateDisplay();
while (digitalRead(prevButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
볼륨 증가 버튼 설정 :
if (digitalRead(volumeUpButtonPin) == LOW && powerOn) {
delay(50); // 디바운스
if (digitalRead(volumeUpButtonPin) == LOW) {
if (volume < 30) volume++;
myDFPlayer.volume(volume);
Serial.print(F("Volume increased to "));
Serial.println(volume);
updateDisplay();
while (digitalRead(volumeUpButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
볼륨 감소 버튼 설정 :
if (digitalRead(volumeDownButtonPin) == LOW && powerOn) {
delay(50); // 디바운스
if (digitalRead(volumeDownButtonPin) == LOW) {
if (volume > 0) volume--;
myDFPlayer.volume(volume);
Serial.print(F("Volume decreased to "));
Serial.println(volume);
updateDisplay();
while (digitalRead(volumeDownButtonPin) == LOW); // 버튼이 릴리스될 때까지 대기
}
}
자동재생 처리 설정 :
자동재생처리는 음악 재생시 첫 곡이 끝나면 다음곡으로 자동재생하는 기능이다.
if (myDFPlayer.available() && powerOn) {
uint8_t type = myDFPlayer.readType();
if (type == DFPlayerPlayFinished) {
Serial.println(F("Track finished, playing next track"));
myDFPlayer.next();
trackNumber++;
updateDisplay();
}
}
작동 방식은 비 감지 센서에 물이 감지되면 서보모터가 90도 회전하면서 와이퍼 작동이 된다. 동시에 LED다이오드가 켜지면서 부저모듈에서 경고음이 울리도록 한다. 또한 LCD 디스플레이에 센서감지 수치와, 와이퍼 작동(OPEN)할 때와 작동하지 않을(CLOSE) 때를 현시하여 준다.
준비물 :
아두이노 우노 R3, Rain 센서 모듈, LCD1602 디스플레이 모듈, 부저모듈, LED다이오드, 서보모터 등이 사용된다.
Rain 센서 모듈
아두이노 우노 R3
LCD1602 디스플레이 모듈
서보 모터
부저 모듈
LED 다이오드
회로 연결 :
비눈감지 측정기 회로도
아두이노 우노 R3
Rain 센서
LCD1602
부저모듈
서보모터
LED 다이오드
+5V
VCC
VCC
VCC
GND
GND
GND
GND
GND
GND
A0
AO
A4
SDA
A5
SCL
D7
DO
D8
S
D9
+핀
D13
+핀
서보모터:
VCC (Red wire): 아두이노의 5V 핀에 연결
GND (Brown wire): 아두이노의 GND 핀에 연결
Signal (Orange wire): 아두이노의 디지털 핀 (예: D8)에 연결
위와 같이 회로연결이 되면 다음과 같이 코딩을 작성한다.
코드 :
#include <LiquidCrystal_I2C.h> // LCD1602 함수 선
#include <Servo.h>
// 레인 센서가 연결된 아날로그 핀
const int rainSensorPin = A0;
const int ledPin = 13; // LED가 연결된 디지털 핀
const int buzzerPin = 9; // 부저 모듈이 연결된 디지털 핀
const int servoPin = 8; // 서보모터가 연결된 디지털 핀
const int threshold = 300; // 비 감지 임계값
LiquidCrystal_I2C lcd (0x27,16,2); // LCD1602 hexa값, 2행 16열 설정
Servo myServo; // 서보모터 객체 생성
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
Serial.begin(9600); // 시리얼 모니터 시작
pinMode(ledPin, OUTPUT); // LED 핀을 출력 모드로 설정
myServo.attach(servoPin); // 서보모터 핀 설정
myServo.write(0); // 초기 위치 설정 (창문 열림 상태)
}
void loop() {
// 레인 센서의 아날로그 값을 읽음
int sensorValue = analogRead(rainSensorPin);
// 시리얼 모니터에 값 출력
Serial.print("Rain Sensor Value: ");
Serial.println(sensorValue);
// 센서 값이 임계값보다 작으면 (비가 내리면) LED 켜기
if (sensorValue < threshold) {
digitalWrite(ledPin, HIGH);
tone(buzzerPin, 1000); // 부저를 1kHz로 설정하여 소리 출력
myServo.write(90); // 서보모터를 90도로 회전 (창문 닫기)
lcd.setCursor(0,1); // LCD 1행 2열에 출력
lcd.print("WIPER : CLOSE");
} else {
digitalWrite(ledPin, LOW);
noTone(buzzerPin); // 부저 소리를 끔
myServo.write(0); // 서보모터를 0도로 회전 (창문 열기)
lcd.setCursor(0,1); // LCD 1행 2열에 출력
lcd.print("WIPER : OPEN");
}
lcd.setCursor(0,0); // LCD 1행 1열에 출력
lcd.print("Value : ");
lcd.print(sensorValue); // LCD에 센서값 출력
delay(1000); // 1초 대기
lcd.clear(); // LCD 클리어
}
모션센서 감지기의 동작원리는 아두이노 우노 R3을 사용하여 센서의 진동이나 충격이 가해지면 부저모듈에 경고음이 울리는과 동시에 경고 신호등이 켜지면서 LCD 디스플레이에 진동이 감지되었음을 현시하여 준다.
구성품 :
아두이노 우노 R3
SW-420 모션센서
LCD1602
부저 모듈
준비품으로는 아두이노 우노 R3(아두이노는 용도에 맞게 아무거나 사용해도 됨), SW-420모션센서, LCD1602 디스플레이, 부저모듈, led 다이오드, led에 연결할 300옴 저항 등이 필요하다.
준비가 전부 완료되면 아래와 같이 센서, 모듈들을 아두이노에 연결한다.
회로 연결 :
SW-420 진동감지기 회로도
아두이노 우노 R3
SW-420 모션 센서
LCD1602
부저 모듈
LED 다이오
+5V
V
VCC
GND
G
GND
G
G
D7
DO
D13
+핀
A4
SDA
A5
SCL
D9
S
모션센서 진동 감지기
위와 같이 회로를 연결하고 다음과 같이 코딩한다.
코딩에 대해 간단히 설명하자면 모션센서의 디지털 출력핀 DO는 아두이노 D7번으로 설정하였고, LED경고신호는 D13번, 부저모듈의 신호핀은 D9번으로 설정하였다.
다음 센서핀은 입력(INPUT), led핀은 출력(OUTPUT) 으로 설정하였다.
감지 기능은 센서값(sensorValue)가 HIGH일 때 ledPin은 HIGH가 되고, 부저핀(buzzerPin)을 1000으로 설정하여 경고음이 울리게 하였고, 동시에 시리얼 모니터와 LCD1602 디스플레이에 모션감지(Motion Detected)라고 현시되게 하였다.
그리고 센서 값이 LOW인 경우에는 LED 다이오드, 부저모듈은 출력되지 않게 하였고, LCD1602에는 감지없음(No Detected)이라고 출력되게 하였다.
코드 :
#include <LiquidCrystal_I2C.h>
const int sensorPin = 7; // 모션센서의 디지털 핀을 7번 핀에 연결
const int ledPin = 13; // LED를 13번 핀에 연결
const int buzzerPin = 9; // 부저 모듈이 연결된 디지털 핀
LiquidCrystal_I2C lcd (0x27,16,2); // LCD1602 hexa값, 2행 16열 설정
void setup() {
lcd.init(); // LCD 초기화
lcd.backlight(); // LCD 백라이트 켬
pinMode(sensorPin, INPUT);
pinMode(ledPin, OUTPUT);
Serial.begin(9600);
}
void loop() {
int sensorValue = digitalRead(sensorPin);
if (sensorValue == HIGH) {
digitalWrite(ledPin, HIGH);
tone(buzzerPin, 1000); // 부저를 1kHz로 설정하여 소리 출력
Serial.println("Motion Detected!");
lcd.setCursor(0,1); // LCD 1행 2열에 출력
lcd.print("Detected!"); // LCD에 센서값 출력
} else {
digitalWrite(ledPin, LOW);
noTone(buzzerPin); // 부저 소리를 끔
lcd.setCursor(0,1); // LCD 1행 2열에 출력
lcd.print("NO Detected!"); // LCD에 센서값 출력
}
lcd.setCursor(0,0); // LCD 1행 1열에 출력
lcd.print("Motion:"); // LCD에 센서값 출력
delay(1000);
lcd.clear(); // LCD 클리어
}
왼쪽에 카테고리 메뉴에서 디자인(PC/모바일을) 누르고 펼쳐진 화면에서 "PC 대표 디자인"의 디자인 편집을 누른다.
그러면 다음과 같이 디자인 편집창이 나온다.
왼쪽 위 메뉴를 보면 "섹션, 스타일, 확장"이라고 3개의 메뉴가 있는데 각각의 기능은 다음과 같다.
섹션 : 쇼핑몰의 띠 배너, 헤더, 메뉴, 스마트배너, 메인 상품 분류, 상품분류 가테고리, 지도, 푸터 등 다양한 디자인을 편집할 수 있는 기능이 있다.
스타일 : 쇼핑몰의 스타일을 선택하는 기능이다. 여기서는 쇼핑몰의 특성에 테마를 선택하여 주면 된다.
스타일
확장 : 여기서는 SNS나 모바일 앱같은 기능을 추가하는 곳이다. 이 기능은 나중에 별도로 추가해보도록 하겠다.
확장
그럼 이제부터 섹션메뉴에 있는 기능을 차례로 하나하나 편집해보도록 하겠다.
1. 스마트 팝업
팝업 등록을 누르고 이미지 등록으로 들어간다.
팝업 등록
여기서 이미지를 직접 등록할 수도 있고 간편하게 배너를 만들 수도 있다. 여기서는 간편하게 배너 만들기를 하여 배너를 만들겠다. 간편 배너로 들어가면 다양하게 만들어진 배너들이 있는데 필요한 것을 선택하고 자신의 쇼핑몰에 맞게 편집하고 적용하기를 클릭한다. 예를 들어 "초특가 할인 쿠폰"을 선택하고 적용하기를 클릭해본다.
그러면 다음과 같이 홈페이지에 배너가 추가된것을 볼 수 있다.
배너 생성
2. 띠배너
띠배너는 홈페이지 제일 헤드부문에 나오는 배너인데 이것은 설정하여 배너가 나오게 할 수도 있고 나오지 않게 설정할 수도 있다.
사용함을 선택하여 홈페이지에 들어가보면 다음과 같이 띠배너가 나온 것을 볼 수 있다.
3. 헤더
헤더부분에는 로고, 메뉴, 언어선택, 기본제공 메뉴, 쇼핑기본정보 노출설정이 있다.
1) 로고는 자신의 쇼핑몰 로고를 설정하는 부분이다. 여기서는 자신이 직접만든 로고를 추가할 수도 있고, 간편로고 제작을 선택하여 디자인을 선택하고, 내용만 변경하여 로고를 추가할 수도 있다.
참고로 로고 권장 사이즈는 600X600px이고, 간편로고는 선택만 하여주면 된다. 우리는 간편로고를 선택하여 만들어 보겠다. 로고 탬플릿에 들어가면 다양한 로고가 있는데 자신의 취향에 맞는 것을 선택하고 적용하기를 누른다.
그러면 홈페이지에 선택한 로고가 적용된 것을 볼 수 있다.
오늘은 쇼핑몰 홈페이지에 스파트 팝업, 띠배너, 헤더부분에서 로고생성 편집까지 해보았다.
다음은 상단 메뉴편집을 하는 것이 있는데 메뉴편집은 카테고리별로 설정해주어야 하므로 좀 복잡하고 시간이 많이 걸린다.