Unity에서 public 변수에 설명(툴팁) 추가하는 방법

Unity에서 public 변수를 선언할 때, 인스펙터(Inspector)에서 해당 변수의 역할을 쉽게 이해할 수 있도록 설명을 추가하는 방법을 소개합니다. 이를 통해 협업 시 가독성을 높이고, 유지보수를 쉽게 할 수 있습니다.

1. Tooltip 속성을 사용하여 설명 추가하기

Unity에서는 [Tooltip] 속성을 사용하면 인스펙터에서 변수 위에 마우스를 올렸을 때 설명이 표시됩니다.

✅ Tooltip 예제 코드

using UnityEngine;

public class Example : MonoBehaviour
{
    [Tooltip("이 변수는 플레이어의 최대 체력을 설정합니다.")]
    public int maxHealth = 100;

    [Tooltip("이 변수는 플레이어의 이동 속도를 설정합니다.")]
    public float moveSpeed = 5.0f;
}

🔹 결과

• maxHealth와 moveSpeed 변수 위에 마우스를 올리면 설명이 표시됩니다.
• 변수의 역할을 쉽게 파악할 수 있어 유지보수가 편리해집니다.

2. Header & Space 속성으로 가독성 높이기

단순한 툴팁 외에도 Header와 Space 속성을 사용하면 인스펙터에서 변수를 그룹화하고 가독성을 향상시킬 수 있습니다.

✅ Header와 Space 속성 예제

using UnityEngine;

public class Example : MonoBehaviour
{
    [Header("플레이어 설정")]
    [Tooltip("이 변수는 플레이어의 최대 체력을 설정합니다.")]
    public int maxHealth = 100;

    [Tooltip("이 변수는 플레이어의 이동 속도를 설정합니다.")]
    public float moveSpeed = 5.0f;

    [Space(10)] // 10픽셀 간격 추가
    [Header("공격 설정")]
    [Tooltip("이 변수는 플레이어의 공격력을 설정합니다.")]
    public int attackDamage = 10;
}

🔹 결과

• Header("플레이어 설정") → 변수를 논리적인 그룹으로 묶어 가독성을 높임
• Space(10) → 변수 간 간격을 조절하여 보기 편하게 정리

3. SerializeField를 활용한 변수 보호

public 변수를 사용하면 외부에서 접근이 가능하여 실수로 변경될 위험이 있습니다.
하지만 private 변수에 [SerializeField] 속성을 추가하면 인스펙터에서 조정은 가능하지만, 외부 스크립트에서 직접 접근할 수 없도록 보호할 수 있습니다.

✅ SerializeField 예제

using UnityEngine;

public class Example : MonoBehaviour
{
    [Tooltip("이 변수는 플레이어의 최대 체력을 설정합니다.")]
    [SerializeField]
    private int maxHealth = 100;
}

🔹 결과

• private 변수지만 인스펙터에서 값을 조정할 수 있음
• 외부에서 접근이 불가능하므로 코드를 안전하게 보호할 수 있음

4. 요약 및 정리

기능 사용법 설명

이렇게 하면 Unity 프로젝트에서 변수를 보다 직관적으로 관리할 수 있습니다.
특히 팀원과 협업할 때나 나중에 코드를 다시 볼 때도 변수의 역할을 쉽게 파악할 수 있어 유지보수가 훨씬 편리해집니다! 🚀

JavaScript 랜덤 값 생성 방법

JavaScript에서 랜덤 값을 생성하는 다양한 방법을 정리했습니다.

1. 0 이상 1 미만의 랜덤 값

let randomValue = Math.random();
console.log(randomValue); // 0 이상 1 미만의 실수

2. 정수 범위 내 랜덤 값

let randomInt = Math.floor(Math.random() * 11);
console.log(randomInt); // 0 이상 10 이하의 정수

3. 특정 범위 내 랜덤 값 (min ~ max)

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(5, 15)); // 5 이상 15 이하의 정수

4. 배열에서 랜덤한 요소 선택

let items = ["사과", "바나나", "체리", "포도"];
let randomItem = items[Math.floor(Math.random() * items.length)];
console.log(randomItem); // 배열 요소 중 하나 랜덤 선택

5. 랜덤한 Boolean 값

let randomBool = Math.random() < 0.5; // true 또는 false
console.log(randomBool);

6. 랜덤한 색상 코드 (Hex)

function getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}

console.log(getRandomColor()); // 예: #a3e12f

이제 JavaScript에서 다양한 랜덤 값을 생성하는 방법을 쉽게 활용할 수 있습니다!

JavaScript에서 진동 처리하기

JavaScript에서 진동을 처리하려면 Vibration API를 사용할 수 있습니다. 이 API는 navigator.vibrate() 메서드를 제공하며, 진동 기능이 있는 디바이스(일반적으로 모바일)에서 작동합니다.

navigator.vibrate(500);

navigator.vibrate([300, 100, 500]);

navigator.vibrate(0);

<button onclick="navigator.vibrate(200)">진동하기</button>

if ("vibrate" in navigator) {
    console.log("이 디바이스는 진동을 지원합니다!");
} else {
    console.log("진동 기능을 지원하지 않습니다.");
}

이제 모바일 웹에서 진동을 활용해 UX를 개선할 수 있습니다! 🚀

이벤트와 DOM 조작

document.getElementById("changeColor").addEventListener("click", function() {
    let box = document.getElementById("box");
    let colors = ["lightblue", "lightcoral", "lightgreen", "lightgoldenrodyellow"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    box.style.backgroundColor = randomColor;
});

document.getElementById("changeText").addEventListener("click", function() {
    let box = document.getElementById("box");
    let messages = ["안녕하세요!", "DOM 조작 중!", "이벤트 발생!", "JavaScript 재미있어요!"];
    let randomMessage = messages[Math.floor(Math.random() * messages.length)];
    box.textContent = randomMessage;
});

색상 변경 텍스트 변경

다음 글 바로 가기 : 자주 사용하는 내장 객체 (Array, Object, String 등)

<h2>1. 함수 선언</h2>
<p>함수를 선언하는 방법은 여러 가지가 있지만, 대표적으로 <strong>함수 선언문</strong>과 <strong>함수 표현식</strong>이 있습니다.</p>

<h3>1.1 함수 선언문</h3>
<pre><code>function greet() {
console.log("안녕하세요!");

}

greet(); // 함수 호출 위 코드는 greet이라는 이름의 함수를 선언하고, greet();을 통해 호출하여 실행합니다.

<h3>1.2 함수 표현식</h3>
<pre><code>const greet = function() {
console.log("안녕하세요!");

};

greet(); // 함수 호출 함수 표현식에서는 함수를 변수에 저장할 수 있으며, 선언 후에 호출해야 합니다.

<h2>2. 매개변수와 반환값</h2>
<p>함수는 외부에서 값을 받아 처리할 수 있으며, 결과값을 반환할 수도 있습니다.</p>

<h3>2.1 매개변수가 있는 함수</h3>
<pre><code>function greet(name) {
console.log("안녕하세요, " + name + "!");

}

greet("철수"); 위 함수는 name이라는 매개변수를 받아 호출 시 원하는 이름을 입력할 수 있습니다.

<h3>2.2 반환값이 있는 함수</h3>
<pre><code>function add(a, b) {
return a + b;

}

let result = add(3, 5); console.log("결과: " + result); add 함수는 두 개의 값을 받아 더한 후 결과를 반환합니다.

<h2>3. 화살표 함수 (Arrow Function)</h2>
<p>ES6에서 도입된 <strong>화살표 함수</strong>는 더 간결한 문법을 제공합니다.</p>

<pre><code>const greet = (name) => {
console.log("안녕하세요, " + name + "!");

};

greet("영희"); 화살표 함수는 function 키워드를 생략하고 =>를 사용하여 선언할 수 있습니다.

<h2>4. 함수 활용 예제</h2>

<h3>4.1 두 수의 곱 구하기</h3>
<pre><code>function multiply(a, b) {
return a * b;

}

console.log("3 * 4 = " + multiply(3, 4));

<h3>4.2 배열 요소 출력</h3>
<pre><code>const numbers = [10, 20, 30];

numbers.forEach(function(num) { console.log("배열 요소: " + num); });

<h2>마무리</h2>
<p>함수는 JavaScript에서 핵심적인 개념으로, 다양한 기능을 모듈화하고 코드의 재사용성을 높이는 데 중요합니다.</p>
<p>직접 다양한 함수를 만들어 보며 연습해보세요! 🚀</p>

다음 글 바로 가기 : 이벤트와 DOM 조작

제어문 (조건문과 반복문)

프로그래밍에서 "제어문"은 코드의 실행 흐름을 조작하는 문법입니다. JavaScript에서 중요한 제어문에는 조건문과 반복문이 있습니다.

1. 조건문 (Conditional Statements)

1.1 if 문

let age = 18;

if (age >= 18) {
    console.log("성인입니다.");
}

1.2 if-else 문

let age = 16;

if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

1.3 else-if 문

let score = 85;

if (score >= 90) {
    console.log("A 학점");
} else if (score >= 80) {
    console.log("B 학점");
} else if (score >= 70) {
    console.log("C 학점");
} else {
    console.log("F 학점");
}

1.4 switch 문

let day = "월요일";

switch (day) {
    case "월요일":
        console.log("한 주의 시작입니다!");
        break;
    case "금요일":
        console.log("주말이 다가옵니다!");
        break;
    case "일요일":
        console.log("내일은 다시 월요일...");
        break;
    default:
        console.log("평범한 하루입니다.");
}

2. 반복문 (Loops)

2.1 for 문

for (let i = 0; i < 5; i++) {
    console.log("현재 i 값: " + i);
}

2.2 while 문

let count = 0;

while (count < 3) {
    console.log("count 값: " + count);
    count++;
}

2.3 do-while 문

let num = 0;

do {
    console.log("num 값: " + num);
    num++;
} while (num < 3);

2.4 for...in 문 (객체 반복)

let person = { name: "John", age: 25, city: "Seoul" };

for (let key in person) {
    console.log(key + ": " + person[key]);
}

2.5 for...of 문 (배열 반복)

let numbers = [10, 20, 30, 40];

for (let num of numbers) {
    console.log(num);
}

3. 제어문 활용 예제

3.1 짝수/홀수 판별하기

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i + "는 짝수입니다.");
    } else {
        console.log(i + "는 홀수입니다.");
    }
}

3.2 1부터 100까지의 합 구하기

let sum = 0;

for (let i = 1; i <= 100; i++) {
    sum += i;
}

console.log("1부터 100까지의 합: " + sum);

마무리

조건문과 반복문은 JavaScript에서 필수적인 기능입니다. 조건문을 사용하여 실행할 코드의 흐름을 결정하고, 반복문을 활용하여 효율적으로 작업을 수행할 수 있습니다.

이제 직접 다양한 예제를 만들어 보면서 연습해보세요! 🚀

다음 글 바로 가기 : 함수 기초 (함수 선언, 호출, 매개변수)

Unity에서 애니메이션 종료 시점 처리하는 방법

Unity에서 애니메이션이 종료될 때 특정 동작을 실행하려면 여러 가지 방법이 있습니다. 대표적인 방법을 정리해 보겠습니다.

1. Animation 이벤트 활용

애니메이션의 특정 프레임에서 이벤트를 호출하는 방식입니다.

2. Animator State 이벤트 활용

애니메이션 상태가 종료될 때 자동으로 감지하는 방법입니다.

3. 코드에서 직접 애니메이션 종료 감지

애니메이터의 상태 정보를 체크하여 애니메이션 종료를 감지하는 방식입니다.

4. Coroutine을 이용한 대기 후 실행

애니메이션 길이를 직접 계산하여, 종료 후 실행하는 방식입니다.

어떤 방법을 선택해야 할까?

결론

- 애니메이션마다 실행해야 할 동작이 다르면 Animation 이벤트 사용
- 특정 애니메이션 상태에서만 감지하려면 State Machine Behaviour 사용
- 코드에서 전체적으로 관리하려면 Animator 상태 체크 사용
- 일정 시간 후 실행하려면 Coroutine 사용

이 중 Animation 이벤트나 State Machine Behaviour가 가장 권장되는 방법입니다.
상황에 맞는 방식을 선택해서 사용하면 됩니다! 🚀