AI가 개발자를 대체한다? 현업에서 보면 전혀 다른 이야기

작성자:
 요즘 AI 관련 광고를 보면 공통된 메시지가 있다. “이제 개발자 필요 없다” “AI가 대신 다 만들어준다” 처음 보면 맞는 말처럼 들린다. 코드도 만들어주고, 수정도 해주고, 심지어 앱도 만든다고 한다. 그런데 실제 개발 현장에서 보면 이야기가 완전히 다르다. AI는 분명히 빠르다. 간단한 기능이나 화면 정도는 금방 만들어준다. 검색보다 빠르고, 기본 코드 작성도 훨씬 편해졌다. 문제는 그 다음이다. 실제 서비스는 단순히 “코드가 돌아간다”로 끝나지 않는다. 로그인, 결제, 데이터 처리, 오류 대응까지 들어가는 순간 상황이 완전히 달라진다. 예를 들어 이런 경우가 있다. 기능은 정상적으로 동작하는데 특정 상황에서만 데이터가 저장되지 않는다. 또는 결제는 됐는데 DB에는 기록이 안 남는다. 이런 문제는 AI가 해결해주지 않는다. 오히려 원인을 찾는데 더 시간이 걸리는 경우도 많다. 그리고 더 중요한 건 따로 있다. 고객은 “코드”를 원하는 게 아니다. “문제가 없는 서비스”를 원한다. AI는 코드를 만들어준다. 하지만 구조를 설계하고, 예외를 고려하고, 문제가 생겼을 때 책임지는 건 사람이 해야 한다. 그래서 현업에서는 이렇게 말한다. AI는 도구다. 좋은 도구인 건 맞지만, 개발자를 대체하는 수준은 아니다. 오히려 반대다. AI 덕분에 개발 속도는 빨라졌지만 검수와 안정성의 중요성은 더 커졌다. 결국 개발자의 역할은 사라지는 게 아니라 조금씩 바뀌고 있다. 코드를 직접 다 치는 사람이 아니라 전체를 이해하고 문제를 해결하는 사람이 더 중요해지는 방향이다. 정리하면 이렇다. AI는 코드를 만들어준다. 하지만 서비스를 완성하는 건 여전히 사람이다.
댓글 쓰기

Swiper-slider로 반응형 작업할 때 이미지 사이즈에 따라서 높이 지정하기

작성자:

 Swiper 슬라이더를 사용하면 웹페이지에 쉽게 슬라이드 기능을 삽입할 수 있습니다.

심지어는 반응 형 웹을 개발할 때도 옵션 만으로 쉽게 반응 형 기능을 구현할 수 있습니다.

autoHeight : true;

위와 같이 옵션을 주면 이미지의 넓이에 맞춰서 이미지의 높이가 자동 조절됩니다. 

하지만 이미지의 크기가 그리 크지 않을 때에는 화면을 줄임에 따라 이미지의 높이가 자동 

조절 되면서 이미지가 너무 작아져 버리는 문제가 생깁니다. 

그래서 이미지가 줄어들 때 이미지의 넓이에 맞춰서 높이를 강제 지정해 주어야 하는 것이

필요할 때도 생깁니다.   

<body>
    <section class="main swiper mySwiper">
      <div class="wrapper swiper-wrapper">
        <div class="slide swiper-slide">
          <img src="images/img01.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img02.jpg" alt="" class="image" />
        </div>
        <div class="slide swiper-slide">
          <img src="images/img03.jpg" alt="" class="image" />
        </div>
      </div>
      <div class="swiper-button-next nav-btn"></div>
      <div class="swiper-button-prev nav-btn"></div>
      <div class="swiper-pagination"></div>
    </section>

    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
		autoplay: {     //자동슬라이드 (false-비활성화)         
		    delay: 2500, // 시간 설정          
		   disableOnInteraction: false, // false-스와이프 후 자동 재생        
		},
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>

위의 코드는 Swiper 슬라이더에서 제공해 주는 기본 코드 중에 하나 입니다.

브라우저의 화면 크기에 따라 높이도 자동으로 조절되는 듯이 보이지만 마우스를 이용

해서 브라우저의 넓이를 서서히 줄이면 높이가 변하지 않고 그대로 유지 됩니다.

마우스를 이용해서 브라우저의 크기를 변경할 때는 아래와 CSS 코드를 만들어 주시면

됩니다.

  <style>
	@media screen and (max-width: 1024px) {
            .swiper{
		height: 650px !important;
            }
    }

	@media screen and (max-width: 768px) {
            .swiper{
		height: 450px !important;
            }
    }
  </style>

Swiper 슬라이더를 아래와 같이 CDN으로 사용하므로 ! important 선언을 해서 height 속성의 우선 순위를 높여 줍니다. 


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

댓글

댓글 쓰기