Ecole 캡스톤 디자인 2주차

다빈·2024년 9월 22일

Ecole 캡스톤 디자인

Capstone Design🖥️

목록 보기

3/9

1주제 강의 : 가상 케이스로 기획부터 제작까지 HTML, CSS로 만드는 사이트

현업에서 실제 웹 사이트 제작 프로젝트를 맡게 되면 어떤 순서로 프로젝트를 진행해야하는지 알아보자.

먼저 프로젝트를 맡게되고 나면 클라이언트와 첫 미팅을 갖게 된다. 이 첫 번째 미팅이 정말 중요한데, 미팅에 가서는 다음과 같이 프로젝트 목표, 마감일, 비용, 유지보수, 타겟층, 요청/제외사항, 리소스 확보, 연락수단 확정 등의 일을 정리해와야한다.

보통 이런 업무는 이런 웹 사이트의 필요성을 느끼는 다양한 분야의 사장님들이 외주를 맡기게 되는데, 여기서 중요한 점은 사장님은 IT 전문가가 아니라는 것이다.

그러니 우리가 미팅을 가서 듣게 되는 여러 정보들은 듣는대로 바로바로 적어놓는 것이 추후 정리를 할 때 도움이 된다. 그리고 가능한 듣는대로 우리가 이해하기 편한 정보로 바꿔서 정리하는 것이 좋다.

이렇게 클라이언트가 여러 가지 정보를 설명해줬다면, 이제 클라이언트가 말한 것을 토대로 이번 프로젝트의 내용을 분석해야한다.

먼저 프로젝트 기획서부터 작성해야한다.

기획서는 프로젝트가 산으로 가지 않게 길잡이 역할을 해주기 때문에 프로젝트의 본격적인 시작 전 반드시 작성하고 시작해야한다. 기획서에는 프로젝트 목표, 타겟층, 작업 계획(타임라인), 요청사항, 레퍼런스, 리소스 등의 내용이 들어가야한다.

그 다음으로는 IA를 설계해야한다. IA이란 Information Architecture의 약자로, 정보 구조를 의미한다. 이렇게 어떠한 콘텐츠를 사람들에게 잘 전달하기 위해 정보를 구조화한 것을 IA라고 한다. 참고로 기획서를 체계적으로 작성하면 IA는 금방 도출할 수 있다.

이제 와이어프레임을 만들 차례이다. 이 단계에서는 디자인이 아니라 웹사이트의 구조를 어떻게 결정할 것인가에 대해 집중해야한다. 일반적인 사람들은 디자인과 와이어프레임을 잘 구분하지 못한다. 하지만 전문 단계에서는 와이어프레임-디자인-시안의 단계로 프로젝트의 디자인 부분을 완성해낸다. 이 단계를 잘 기억하고 있어야한다.

참고로 와이어프레임을 너무 예쁘게 해서 보내주면 이걸 디자인 작업본으로 오해하는 경우가 더러 있다. 이럴 경우를 대비해 와이어프레임 제작 단계에서는 일부러 못생긴 이미지로 처리해서 보내주는 것이 나중을 생각하면 좋은 선택이다. 클라이언트의 결과물 기대치를 조금 깎을 수 있기 때문에..

이어서 디자인 단계에 들어가보자.
디자인 단계에서는 컬러와 트렌드를 뽑아내서 디자인을 결정한다. 보통 색깔이 주는 이미지가 있어서 각 주제에 맞춰 이를 의미하는 색깔을 사용한다. 참고하기 좋은 사이트에는 behance, pinterest, dribble 등이 있다.

참고로, 웹사이트 코딩을 할 때는 요즘엔 보통 웹 프레임워크나 언어를 많이 사용하는데 그렇게 짜여진 프로그램들은 결국 모두 다 html로 컴파일된다. 그래서 개발자들은 꼭 html, css, javascript라는 기초 개념에 대해 배워야한다는 것이다.

[웹 디자인 참고 사이트]

여기까지 실무에서 프로젝트를 진행하는 방식에 대해 알아보았다. 이제 이어서 HTML과 CSS로 예시 디자인을 따라 웹사이트를 하나 만들어보자.

웹페이지를 구성하는 3대 언어에는 HTML, CSS, Javascript가 있다. 이 그림에서 알아볼 수 있듯이 HTML은 웹페이지의 문서 구조, 뼈대를, CSS는 뼈대 위의 형체를, Javascript는 웹페이지의 동작, 즉 동적인 부분을 담당한다.

HTML에는 몇 가지 주요 시맨틱 태그(Semantic Tag)가 있는데, 이 태그를 잘 알아두면 앞으로 작업할 때 좀 더 유리하다.

왼쪽에 있는 예시 디자인을 이렇게 6개의 파트로 구분해서 각 태그의 하위에 콘텐츠의 구조를 채워넣을 것이다. 참고로 설계론적인 부분에 있어서는 id를 잘 쓰지 않는 경향이 있다. 그리고 네비게이션 바를 공용적으로 쓰는 것을 “Global Navigater Bar” 라고 한다.

이미지를 넣을 땐 이 이미지를 배경 화면에 넣느냐, 이미지 자체를 페이지에 넣느냐 두 가지로 구분할 수 있다.

완성된 html 파일을 실행시켜보면 이렇게 웹 페이지의 뼈대를 확인해볼 수 있다. 다음 특강에 이어서 CSS 파일도 완성해서 최종 웹사이트를 확인해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SaltSalty</title>
</head>
<body>
    <nav id="gnb">
        <a href="st_map" target="_self" title="오시는 길 섹션으로 이동">오시는 길</a>
    </nav>

    <section id="hero">
        <img src="https://placehold.co/40" alt="다크 로고"/>
        <br> <!-- 이런 태그들은 브라우저에 따라 안 닫아줘서 오류 발생 가능(꼬박꼬박 닫기)-->
        <h1>SaltSalty</h1>
        <p>
            가벼운 듯 묵직한 시그니쳐 소금을 사용한 시오라멘.
            <br />
            매달 바뀌는 다양한 시오라멘을 맛보세요.
        </p>
    </section>
    

    <selection id="st_time">
        <h2>영업 시간</h2>
        <p>
            11시 ~ 15시, 17시 ~ 20시
            <br />
            (last order: 19시)
        </p>
        <img src="https://placehold.co/40" alt="이 달의 휴무 일정 달력"/>
    </selection>

    <selection id="st_menu">
        <h2>이 달의 메뉴</h2>
        <ul>
            <li>
                <img src="https://placehold.co/40" alt="메뉴 1"/>
                <h3>메뉴 1 이름</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium tempore enim omnis animi? Asperiores neque nam itaque. Ut, adipisci asperiores, perferendis iure inventore magni aliquid, quos velit dolore assumenda temporibus.</p>
            </li>
            <li>
                <img src="https://placehold.co/40" alt="메뉴 2"/>
                <h3>메뉴 2 이름</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium tempore enim omnis animi? Asperiores neque nam itaque. Ut, adipisci asperiores, perferendis iure inventore magni aliquid, quos velit dolore assumenda temporibus.</p>

            </li>
            <li>
                <img src="https://placehold.co/40" alt="메뉴 3"/>
                <h3>메뉴 3 이름</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium tempore enim omnis animi? Asperiores neque nam itaque. Ut, adipisci asperiores, perferendis iure inventore magni aliquid, quos velit dolore assumenda temporibus.</p>
            </li>
        </ul>
    </selection>

    <selection id="st_top">
        <h2>오시는 길</h2>
        <address>부산시 남구 수영로 309(주차 가능)</address>
        <a href="tel:0511234567" title="051-123-4567" target="_blank">051-123-4567</a>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3262.675460026335!2d129.0984966!3d35.1397716!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3568ecf1de40adff%3A0xc301b4b89a2f6059!2z6rK97ISx64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1726820841437!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"  referrerpolicy="no-referrer-when-downgrade"></iframe>
        <nav>
            <ul>
                <li>
                    <a href="https://kko.to/d84-G0IU6A" target="_blank" title="카카오맵으로 보기">카카오맵으로 보기</a>
                </li>
                <li>
                    <a href="https://naver.me/5PSuzX0t" target="_blank" title="네이버지도로 보기">네이버지도로 보기</a>
                </li>
            </ul>
        </nav>
    </selection>

    <footer>
        <h2>SNS 채널</h2>
        <nav>
            <ul>
                <li>
                    <a href="https://www.instagram.com/~~~" target="_blank" title="인스타그램 가기">인스타그램 가기</a>
                </li>
                <li>
                    <a href="http://pf.kakao.com/~~~" target="_blank" title="카카오톡 채널 가기">카카오톡 채널 가기</a>
                </li>
                <li>
                    <a href="https://www.youtube.com/~~~" target="_blank" title="유튜브 채널 가기">유튜브 채널 가기</a>
                </li>
            </ul>
        </nav>
        <!--&copy; 는 카피라이트 표시 기호(©)-->
        <small>&copy; 2024. SaltSalty all rights reserved.</small>
    </footer>
</body>
</html>

2주제 강의 : 라즈베리파이 서버화 작업 완료

이제부터는 저번에 각자 배부받은 라즈베리파이의 MAC 주소를 공유기에 등록시켜 라즈베리파이가 고정된 사설 ip를 부여받도록 설정할 것이다.

보통 일반적인 회사, 학교의 경우에는 외부에서 서버에 접속하는 것을 막기 위해 방화벽을 구축한다. 하지만 이 방화벽을 우회하여 서비스에 접속하려면 터널링이라는 기술을 이용할 수 있다.

Cloudflare에 접속하면 터널링 서비스를 이용할 수 있다.

Cloudflare에서 제공하는 Cloudflared-Tunneling 서비스는 사용자가 운영하는 서버와 Cloudflare 네트워크 간에 터널을 설정하여 이 터널을 통해 서버의 트래픽이 Cloudflare로 전달되고, 그 후 Cloudflare가 이를 인터넷 사용자에게 전달하는 방식으로 구성되어 실제 서버는 공개적으로 노출되지 않으며, 인터넷에서는 Cloudflare 네트워크가 유일한 진입점 역할을 하게 된다.

그래서 서버의 IP 주소는 인터넷에 공개되지 않으며, 이를 통해 공격 벡터(예: DDoS 공격)를 크게 줄일 수 있다. 또한 외부인이 특정 리소스에 접근하는 것을 방지할 수 있다.

사실 회사 등의 사설 네트워크에서 개인 장비로 이렇게 터널링을 이용하면 회사의 기밀 등 중요한 내부 정보를 빼낼 수도 있기 때문에 실제로는 이용하지 않는 것이 좋다. 우리가 이번에 터널링 기법을 사용해보는 것은 원칙적으로는 공인 IP 하나 당 하나의 포트만 이용할 수 있지만 터널링을 통해 IP 하나 당 여러 개의 포트를 이용하기 위해 하는 것이다.