개발자 김수진

인공지능(AI)은 현대 소프트웨어 개발에서 핵심적인 역할을 수행하고 있습니다. 특히, 프론트엔드 개발자들에게는 AI를 활용하여 사용자 경험을 향상시키고 개발 효율성을 높이는 다양한 방법이 존재합니다. 이번 글에서는 프론트엔드 개발자가 AI를 효과적으로 활용할 수 있는 기술적 접근법을 살펴보겠습니다.

1) AI 기반의 코드 자동 완성 및 최적화

AI는 코드 작성 과정에서 자동 완성 기능을 제공하여 개발자의 생산성을 높입니다. 또한, AI는 코드의 복잡성을 분석하고 최적화 방안을 제시하여 성능 향상에 기여합니다. 저도 실제로 개발하면서 많이 사용하고 있는데 작업 시간이 정말 단축된 것을 느낄 수 있고 제가 생각하지 못한 부분에 대해서도 제안해주니 제 개발 실력에도 많은 도움이 됩니다.

아래는 대표적인 도구들입니다.

• GitHub Copilot: OpenAI Codex를 기반으로 하여 GitHub과 Microsoft가 공동 개발한 AI 코드 자동 완성 도구입니다. Visual Studio Code와 같은 편집기에서 확장 프로그램으로 사용되며, JavaScript, Python, TypeScript 등 다양한 언어를 지원합니다.
  GitHub Copilot 바로가기
• Cursor AI: Visual Studio Code 사용자에게 최적화된 도구로, 코드를 작성하는 동시에 성능을 실시간으로 최적화할 수 있습니다. AI 기반 실시간 코드 최적화와 자연어 명령어 지원 기능을 제공합니다.
  Cursor AI 바로가기
• Tabnine AI: 딥러닝 알고리즘을 사용하여 지능형 코드 완성을 제공하는 도구로, 다양한 프로그래밍 언어와 IDE를 지원합니다. 개발자의 코딩 스타일에 맞게 적응하여 개인화된 코드 제안을 제공합니다.
  Tabnine AI 바로가기
• Codeium: 70개 이상의 프로그래밍 언어를 지원하며, 인기 있는 IDE에 통합되어 개발자가 더 빠르고 효율적으로 코드를 작성하는 데 도움을 줍니다. 무료로 제공되면서도 고급 기능을 제공합니다.
  Codeium 바로가기

2) AI를 활용한 이미지 및 비디오 처리 자동화

인공지능(AI)은 이미지 및 비디오 처리의 자동화를 통해 다양한 산업에서 혁신을 주도하고 있습니다. 특히, 디자인 리소스 플랫폼인 Freepik은 AI 기술을 적극 활용하여 사용자들에게 향상된 서비스를 제공하고 있습니다. 아래에서는 Freepik의 AI 활용 사례를 살펴보겠습니다.

Freepik의 AI 활용 사례

1. AI 이미지 생성기
   Freepik은 텍스트 프롬프트를 입력하면 실시간으로 이미지를 생성하는 AI 이미지 생성기를 제공합니다. 이를 통해 사용자는 원하는 이미지를 빠르게 얻을 수 있습니다.
2. AI 비디오 생성기
   Freepik의 AI 비디오 생성기는 텍스트나 이미지를 입력하면 몇 단계만으로 동영상을 제작할 수 있는 도구입니다. 다양한 모드를 선택하여 필요에 맞는 동영상을 생성할 수 있습니다.

이러한 AI 기반 기능들은 디자인 작업의 효율성을 높이고, 다양한 아이디어를 실현하는 데 큰 도움이 됩니다. 저도 실제로 이러한 AI 기술을 활용한 서비스를 개발 중인데, 사용자에게 더욱더 다양한 기능들을 제공할 수 있게 되었습니다.

AI로 한층 더 효율적인 프론트엔드 개발

요즘 tailwind CSS를 사용해서 스타일을 적용하고 있는데 기존에 사용하던 CSS와는 달라

스타일을 적용하다가 막히는 부분이 생긴다.

그래서 공식 문서를 참고하여 적용하고 있다.

아래 사진과 같이 기존 css 문법에 해당하는 TailWind CSS 문법을 알려줘서 굉장히 보기가 편하다. 

[Custom Font 사용하기 ]

여러 사이트에서 무료 폰트들을 많이 제공하고 있다.

나는 보통 https://noonnu.cc/ 여기서 많이 사용한다.

다양한 예쁜 폰트들을 무료로 제공해줘서 매우 유용하게 쓰고있다.

원하는 폰트를 찾아 클릭해서 들어가면 사진과 같이 font-face 값이 제공된다.

해당 값을 그대로 복사하여 nextJS 프로젝트의 globals.css 파일에 넣어주면 된다.

그리고 추가한 폰트를 nextJs 프로젝트에 존재하는 tailwind.config.js 파일에 사진과 같이 넣어주면 된다.

그리고 실제 코드에서 아래와 같이 사용하면 된다.

<ul className="font-establishRetrosansOTF">

[Custom Color 사용하기 ]

마찬가지로 원하는 색상을 적용하고 싶으면 tailwind.config.js 파일에 아래와 같이 원하는 색상을 등록해주면 된다.

아래 코드와 같이 등록한 색상을 사용하면 된다.

<ul className="text-customBlue">

• 블록(Block) 요소와 인라인(Inline) 요소 

1. 블록 요소

- 사용 가능한 가로 너비를 최대한 활용

- 크기를 지정할 수 있다.

( default = width : 100%, height : 0%)

- 수직으로 쌓인다.

- margin, padding 온전하게 사용 가능

- 주로 레이아웃을  다루기 위해 사용

Ex ) DIV, H1, P...

2.   인라인 요소

- 필요한 가로 너비만 사용

- 크기를 지정할 수 없다.

( default = width : 0%, height : 0%)

- 수평으로 쌓인다.

- margin, padding에서 top,down 사용 불가능

- 주로 TEXT에 사용

Ex) IMG, SPAN...

• 여러가지 의미있는 블록 요소 태그들

- header : 홈페이지 가장 상단 부분을 나타내는 태그 , 페이지 상단바

- foooter : 홈페이지 가장 하단, 저작권 데이터 등과 같은 내용이 기재된 부분

- article : 독립적으로 구분 가능하거나 재사용 가능한 영역을 설정 

ex ) 블로그, 매거진 등...

- section : 영역을 나눌 때 많이 사용, 영역에 의미가 있기 때문에 제목을 포함. 주로 h1~h6를 사용해 구분

- aside : 오른쪽, 왼쪽 등 사이드 부분에 광고와 같은 것들을 넣을 때 사용

- nav :   navigation의 약자로 다른 페이지의 링크를 제공. 보통 메뉴를 묶을 때 많이 사용 

- address : 연락처, 주소 등의 정보롤 제공할 때 사용

- div : 아무 의미를 나타내지 않는 태그, 꾸미는 목적으로 많이 사용 

================================================================================

- ol : ordered list. 순서 type, 역순, 시작 값, 등을 지정할 수 있다.

ex)

<ol type="a" reversed="reversed"></ol>

- ul : unordered list

- li : list item, li 단독으로는 사용 못해. ol이나 ul의 자식으로 포함되어야 된다.

- h1 ~ h6 : 제목을 나타낼 때 사용, 순차적으로 사용( h1 다음 h4 말고 h2 사용)

- p : paragraph, 하나의 문단을 설정할 때 사용

- hr : 문단의 분리를 위해 사용( 의미적 표현 ). 수평선을 생성 (시각적 표현)

- pre : preformatted text, 서식이 미리 정해진 텍스트. 텍스트의 공백과 줄바꿈을 유지 가능 

  tab, spacebar 등이 그대로 출력 가능 

• 여러가지 의미있는 인라인 요소 태그들

- a : Anchor,  현재 문서에서 외부 문서로 링크를 걸 때. 버튼 요소로 많이 쓰인다.

    파일 다운로드 등...

    주로 block요소로 전환하여 모양을 입힌다. 

    속성으로  target이 존재하는데 링크 url을 현재 창에 띄울지 , 새로운 창에 띄울지 설정할 수 있다.

    또한 href를 id로 설정하여 해당 id를 지닌 태그가 존재하는 위치로 이동할 수 있다.

    <a href="https://google.co.kr" target="_blanck">google</a>
    <a href="./image1.png">Image Download</a>


<!-- 페이지 내에서 list1이라는 id가 존재하는 위치로 이동 -->
    <ul>
        <li><a href="#list1">list1</a></li>
    </ul>
    <h2 id="list1">list1</h2>

- abbr : abbreviation, 약어

abbr를 사용해 약어를 설명

<abbr title="Hyper Text Markup Language>HTML</abbr>

-